Default
Primary action button with a clear label.
Variants
Use variants to communicate intent. Keep the page to one clear primary action.
Disabled
Disable actions while submitting or when prerequisites aren’t met.
Browse components
Button
Accessible button with a small set of visual variants and sizes. Use it for primary and secondary actions across forms, dialogs, and toolbars.
atoms 7 variants
Variants / states: primarysecondaryoutlineghostlinkdangerdisabled
Live example
Default usage you can copy and adapt.
Props
The props you are most likely to need, with types and defaults.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| variant | string | No | primary | Button style variant |
| size | string | No | md | Button size |
| disabled | boolean | No | false | Disable the button |
| type | string | No | button | HTML button type |