Last Updated: 1/28/2026

Button

Buttons trigger actions.

Usage


import { Button } from '@acme/ui';
 
<Button variant="primary">Save</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="ghost">Learn More</Button>

Variants

Variant	Use Case
`primary`	Main actions
`secondary`	Secondary actions
`ghost`	Tertiary actions
`danger`	Destructive actions

Sizes

Size	Height
`sm`	32px
`md`	40px
`lg`	48px

States


<Button disabled>Disabled</Button>
<Button loading>Loading...</Button>

With Icon


<Button>
  <PlusIcon />
  Add Item
</Button>

Full Width


<Button fullWidth>Submit</Button>