Icon button
Also known as: Action button, Toolbar button
Resources
Properties
| Property | Values | Default |
|---|---|---|
Size Variant | Xs | Sm | Md | Lg | Xl | Md |
State Variant | Default | Hover | Focus | Disabled | Default |
Icon InstanceSwap | Any icon | heart |
Best practises
- Use icon buttons for actions that are commonly represented with an icon (edit, delete, share).
- Make sure that the icon clearly communicates the intended action.
- Maintain consistent sizing across the UI.
- Use only one primary icon button per section if possible.
- Don’t use too many icon buttons together, it will overwhelm users.
When to use
Use icon button when the action is commonly recognized by its icon alone (search, close, settings, menu).
The button is used frequently and users can quickly recognize its function.
The action is not universally understood, use regular button instead.
The button is critical and users need clarity.
Size
Dimensions of the icon 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-width-<size>
--scale-height-<size>
--scale-padding-<size>
--scale-radius-<size>
--scale-icon-size-<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 icon 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 icon buttons. Has the similar color as fill icon button, but is less contrasting. |
Outline | Outline icon 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 | Used for the lowest priority actions or complimentary actions for primary icon buttons. |
--icon-button-<variant>-background
--icon-button-<variant>-border
--icon-button-<variant>-icon
--icon-button-<variant>-stroke