Button
Also known as: CTA, Action 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 |
Start item Boolean | true | false | false |
Label Text | string | Button |
End item Boolean | true | false | false |
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.
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-button-positive, moon-button-negative) and automatically adapts the button's colors to match the semantic meaning across all variants (fill, soft, outline, ghost).