Snackbar
Also known as: Toast, Banner
Preview
Resources
Properties
| Property | Values | Default |
|---|---|---|
Variant Mode | Fill | Soft | Fill |
Context Mode | Brand | Neutral | Positive | Negative | Caution | Info | Brand |
Start item Boolean | true | false | true |
Title Text | string | Info |
Action button Boolean | true | false | false |
Close button Boolean | true | false | false |
When to use
When providing brief, non-intrusive feedback about an action, such as confirming a saved change or a sent message.
When the message is temporary and does not require user intervention to dismiss.
If the message is critical and requires immediate attention, use an alert or dialog instead.
If the user needs to take an action that isn’t time-sensitive.
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. |
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-alert-positive, moon-alert-negative) and automatically adapts the button's colors to match the semantic meaning across all variants (fill, soft, outline, ghost).