Button
Triggers an action. Five variants and six sizes; the primary action is black in light mode and pale green in dark mode.
Figma: 10 / Components / ButtonUsage
Source: src/components/ui/button.tsx
import { Button } from '@/components/ui/button'<Button>Save changes</Button>Variants
default for the one primary action, outline for secondary actions, ghost for quiet actions in lists, link for inline navigation, destructive for deleting.
Sizes
sm 32px, default 40px, lg 44px and xl 48px (the original GoodUnited size). Icon buttons are 40px and 32px.
With an icon
Icons are 16px and sit before the label, or after it when they point somewhere.
Disabled
Disabled buttons use Colors/action/disabled. Prefer explaining why an action is unavailable over disabling it silently.
Aligned to the start
Ghost buttons in lists and menus align their content to the start.
When to use
When to reach for it, and when to use something else.
Use it for
Complete: One primary (default) button per view or per drawer footer.
Complete: Outline for Cancel, Filter and secondary actions beside the primary one.
Complete: Destructive only for actions that remove data, and always behind a confirmation.
Complete: Short verb-first labels: Add action, Save changes, Export data.
Avoid
Not complete: Two default buttons side by side.
Not complete: The link variant for actions that change data.
Not complete: Icon-only buttons without an aria-label.
Not complete: Custom colors or heights outside the variants and sizes.
Button
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'outline' | 'ghost' | 'link' | 'destructive' | 'default' | Visual weight of the action. |
| size | 'sm' | 'default' | 'lg' | 'xl' | 'icon' | 'icon-sm' | 'default' | Height and padding. |
| align | 'center' | 'start' | 'center' | Content alignment, start for list and menu rows. |
| render | ReactElement | – | Render as another element, for example a Link. |
| disabled | boolean | false | Blocks interaction and uses the disabled colors. |
