Icon button
Also known as: Action button, Toolbar button
Preview
Resources
Properties
| Property | Values | Default |
|---|---|---|
Variant Mode | Fill | Soft | Outline | Ghost | Fill |
Context Mode | Brand | Neutral | Positive | Negative | Caution | Info | Brand |
Size Variant | Xs | Sm | Md | Lg | Xl | Md |
State Variant | Default | Hover | Focus | Disabled | Default |
Rounded Boolean | true | false | false |
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.
Variants
Variants define the visual appearance of components and communicate the priority of the action or information they represent. Some common variants are provided out of the box (see the table below), but you can also create new variants to match your system's needs.
Variants are created and managed through variable modes in the design system tokens.
| Variant | When to use |
|---|---|
Fill | Used as a primary component style to display highest priority. Visually, it has high contrast compared to its surroundings. |
Soft | Used as a complimentary style, uses less contrasting fill color. |
Outline | Outline components blend more with the surroundings, but are separated from the background with a border. |
Ghost | Used for the lowest priority of components, only text label is visible. |
Context
Context modes extend the visual identity of components by applying semantic meaning through color. Each context type communicates a specific purpose or state, helping users understand the intent of their actions.
Available context types:
- Brand: Primary actions and key interactions or communications (default)
- Neutral: Standard actions or communications without specific semantic meaning
- Positive: Success states, confirmations and constructive actions and communications
- Negative: Destructive actions or communications, errors and warnings that require caution
- Caution: Warning states and actions or communications that need user attention
- Info: Informational actions or communications.
Context is applied through CSS classes (e.g., moon-icon-button-positive, moon-icon-button-negative) and automatically adapts the button's colors to match the semantic meaning across all variants (fill, soft, outline, ghost).