Tag
Also known as: Label, Pill, Badge
Preview
Resources
Properties
| Property | Values | Default |
|---|---|---|
Variant Mode | Fill | Soft | Outline | Ghost | Fill |
Context Mode | Brand | Neutral | Positive | Negative | Caution | Info | Brand |
Size Variant | 2Xs | Xs | Xs |
Start item Boolean | true | false | true |
Label Text | string | Label |
End item Boolean | true | false | true |
When to use
When categorizing or labeling content in a way that helps users understand context.
If the user needs to interact with the tags by adding or removing them.
When displaying static or descriptive keywords to help users filter or understand the content.
If the labels need to be selected or deselected repeatedly as part of a multi-selection process. Use chip instead.
If the labels are interactive and need to represent actions like adding or removing items. Use chip instead.
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-tag-positive, moon-tag-negative) and automatically adapts the button's colors to match the semantic meaning across all variants (fill, soft, outline, ghost).