Button
The everyday action button: five variants × three sizes.
Basic usage
Variants
Five variants: primary solid main action, tonal container-tinted secondary emphasis (M3), secondary outlined, ghost, danger.
Sizes
Disabled & loading
loading shows a spinner and blocks clicks; disabled blocks clicks too.
Block
API
Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | 'primary' | 'tonal' | 'secondary' | 'ghost' | 'danger' | 'primary' | visual variant |
| size | 'sm' | 'md' | 'lg' | 'md' | height 30 / 36 / 42px |
| disabled | boolean | false | disabled |
| loading | boolean | false | loading (spinner, blocks clicks) |
| block | boolean | false | fill parent width |
| type | 'button' | 'submit' | 'button' | native type |
Events
| Name | Payload | Description |
|---|---|---|
| click | (e: MouseEvent) | click (suppressed while disabled / loading) |
Slots
| Name | Description |
|---|---|
| default | button content |