Button

The primary interactive element. Six production-ready variants and three sizes — all styled exclusively with CSS custom properties, so they update automatically when tokens change.

Preview

Variants

Sizes

Disabled

Usage

import { Button } from '@/components/Button';

// Variants
<Button variant="primary">Primary</Button>
<Button variant="outline">Outline</Button>
<Button variant="dark">Dark</Button>
<Button variant="teal">Teal</Button>
<Button variant="cobalt">Cobalt</Button>
<Button variant="marigold">Marigold</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

// Disabled
<Button variant="primary" disabled>Disabled</Button>

// Full width
<Button variant="primary" fullWidth>Full Width</Button>

// With icons
<Button variant="primary" leftIcon={<ArrowIcon />}>
  Continue
</Button>

Props

Prop	Type	Default	Description
`variant`	`'primary' \| 'outline' \| 'dark' \| 'teal' \| 'cobalt' \| 'marigold'`	`'primary'`	Controls the visual color treatment of the button.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Sets the height and horizontal padding. sm = 36px, md = 44px, lg = 52px.
`children`	`React.ReactNode`	`—`	The button label. Required.
`fullWidth`	`boolean`	`false`	Stretches the button to fill its container width.
`disabled`	`boolean`	`false`	Disables interaction and reduces opacity to 0.4. Sets aria-disabled.
`leftIcon`	`React.ReactNode`	`—`	Icon or element rendered to the left of the label.
`rightIcon`	`React.ReactNode`	`—`	Icon or element rendered to the right of the label.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native HTML button type attribute.
`className`	`string`	`—`	Additional CSS class names merged into the element.