Button
Triggers an action. One Primary per view; Secondary and Outline for supporting actions, Ghost for low emphasis, Destructive for irreversible actions.
Variants
Style × Size × State.
SS · DisabledMM · DisabledLL · Disabledprimarysecondaryoutlineghostdestructive
With icon
Pass any Maple icon name.
<Button icon="plus">New project</Button> <Button variant="destructive" icon="trash">Delete</Button>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "outline" | "ghost" | "destructive" | "primary" | Visual style. |
size | "s" | "m" | "l" | "m" | 32 / 40 / 48px tall. |
icon | IconName | — | Leading icon. |
disabled | boolean | false | Disabled state. |
Usage
Do
- Use one Primary per view.
- Write labels as verbs: “Save changes”.
Don't
- Put two Destructive buttons side by side.
- Use Ghost for the main action.