Button
Displays a button or a component that looks like a button.
Overview
No visual options. See Props for what it accepts.
All options
Type and size
| size \ type | primary | secondary | tertiary | textOnly |
|---|---|---|---|---|
| large | ||||
| medium | ||||
| small | ||||
| tiny |
States
| state \ type | primary | secondary | tertiary | textOnly |
|---|---|---|---|---|
| enabled | ||||
| hovered | ||||
| focused | ||||
| disabled | ||||
| selected |
Color
Use the danger color for destructive actions like delete, remove, or cancel operations.
| color \ type | primary | secondary | tertiary | textOnly |
|---|---|---|---|---|
| default | ||||
| danger |
Icons
decoIcon adds a leading icon; actionIcon adds a trailing icon with its own click handler.
| icon \ type | primary | secondary | tertiary | textOnly |
|---|---|---|---|---|
| decoIcon | ||||
| actionIcon | ||||
| both |
Examples
With second label
Add a secondary text below the primary label for additional context (center aligned).
Selected state
Selected state matching Tab selected styling (primary-dark background with contrast text).
Accessibility
Press feedback and focus
Buttons shrink slightly while pressed and change state in 150ms. Tab to a button to see its focus ring.