Button
Also known as: CTA, Action button
Resources
Properties
| Property | Values | Default |
|---|---|---|
Size Variant | Xs | Sm | Md | Lg | Xl | Md |
State Variant | Default | Hover | Focus | Disabled | Default |
Multiline Boolean | true | false | false |
Has start item Boolean | true | false | true |
Start item InstanceSwap | Any icon | heart |
Label Text | string | Label |
Description Text | string | Description |
Has end item Boolean | true | false | true |
End item InstanceSwap | Any icon | heart |
Best practises
- Use buttons to let users take actions, like submitting a form or saving changes.
- Choose the correct button variant to communicate the priority.
- Only use one primary button per screen or section.
- Use clear and concise labels that describe the action (e.g., “Save”, “Continue”)
- Don’t use too many buttons together, it will overwhelm users.
When to use
When triggering an action or process, such as submitting a form or saving changes.
When navigating between pages or to external resources.
When toggling an on/off states, use switch or checkbox instead.
When displaying static information.
Size
Dimensions of the button are tied to the global scale tokens. This ensures that the components with similar size settings remain consistent across the interface. scale tokens also provides more granular control over dimensional settings.
scale.css
--scale-width-<size>
--scale-height-<size>
--scale-padding-<size>
--scale-gap-<size>
--scale-radius-<size>
--scale-icon-size-<size>
--scale-text-size-<size>
--scale-text-height-<size>
Variants
Some common variants are already created and ready to use (see the table), but you have the possibility to add new variants or customize every visual aspect through tokens and token modes.
| Variant | When to use |
|---|---|
Fill | Used as a primary button style to display highest priority actions. Background color is usually brand color. Visually, it has high contrast compared to its surroundings. |
Soft | Used as a complimentary style for fill buttons. Has the similar color as fill button, but is less contrasting. |
Outline | Outline buttons blend more with the surroundings, but are separated from the background with a border. Used for secondary actions that don't require immediate response from the user. |
Ghost | Also called as Text buttons. Used for the lowest priority actions or complimentary actions for primary buttons. |
button.css
--button-<variant>-background
--button-<variant>-border
--button-<variant>-icon
--button-<variant>-stroke
--button-<variant>-text