Button
Buttons trigger actions or navigation. Use them sparingly and with clear intent.
Variants
Different visual styles for different contexts.
Sizes
Buttons come in different sizes for different contexts.
With Icons
Icons can enhance button meaning.
Icon Only
Square buttons for icon-only actions.
States
Buttons have different interactive states.
All Variants + Sizes
Complete matrix of all combinations.
| Variant | Small | Default | Large |
|---|---|---|---|
| default | |||
| secondary | |||
| outline | |||
| ghost | |||
| link | |||
| destructive |