All components
Actions
Button
Squared, bold action. Primary inverts to a yellow keyline on hover; ghost and danger carry the same shape.
Preview
Preview
light
dark
Code
<Button>Primary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button size="sm">Small</Button>Import from @/components/ui.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "ghost" | "danger" | "primary" | Visual emphasis. |
size | "sm" | "md" | "lg" | "md" | Control height. |
block | boolean | false | Full-width. |
disabled | boolean | false | Non-interactive, dimmed. |
Usage
Do
- Use one primary button per view for the main action.
- Pair an icon with the label for frequent actions.
Don't
- Stack several primary buttons together — demote the rest to ghost.