Button Component

A versatile Button component for triggering actions and events.

import { Button } from "@locus-ui/components";
<Button variant="solid">  Solid Button</Button>

View Source

Anatomy

Import the component and its parts:

Anatomy

import { Button } from "@locus-ui/components";        <Button />

Examples

Variants

Button components come with four built in variants, solid, outlined, muted, and clear.

variants.tsx

import { Button } from "@locus-ui/components";
const variants = ["solid", "outlined", "muted", "clear"];
return variants.map((variant) => (  <Button key={variant} variant={variant}>    {variant.charAt(0).toUpperCase() + variant.slice(1)} Button  </Button>));

Colors

The button component uses the color prop to allow for predefined and custom colors.

colors.tsx

import { Button } from "@locus-ui/components";
const colors = [  "primary", "secondary", "tertiary",  "success", "danger", "warning", "info",];
return colors.map((color) => (  <Button key={color} color={color} variant="muted">    {color.charAt(0).toUpperCase() + color.slice(1)} Button  </Button>));

Sizes

To manage the size of the button component you can provide a default or custom size through the size prop.

sizes.tsx

import { Button } from "@locus-ui/components";
const sizes = ["xs", "sm", "md", "lg", "xl"];
return sizes.map((size) => (  <Button key={size} size={size} variant="muted">    {size.toUpperCase()} Button  </Button>));

States

Buttons can be given the disabled and readonly states.

states.tsx

import { Button } from "@locus-ui/components";
<Button variant="solid">Default</Button><Button variant="solid" disabled>Disabled</Button><Button variant="solid" readonly>Readonly</Button>

Each variant has its own disabled styling.

disabled-variants.tsx

import { Button } from "@locus-ui/components";
const variants = ["solid", "outlined", "muted", "clear"];
return variants.map((variant) => (  <Button disabled key={variant} variant={variant}>    {variant.charAt(0).toUpperCase() + variant.slice(1)} Disabled  </Button>));

High Contrast

The highContrast prop enables high contrast mode for better visibility. High contrast button styles are only available with the solid variant.

high-contrast.tsx

import { Button } from "@locus-ui/components";
<Button highContrast variant="solid">  High Contrast</Button>