Badge Ready
Badges are used to inform users of the status of an object or of an action that’s been taken. Commonly used in tabular data to indicate status.
<nord-stack direction="horizontal" gap="s">
<nord-badge type="info">Info</nord-badge>
<nord-badge type="success">Success</nord-badge>
<nord-badge type="warning">Warning</nord-badge>
<nord-badge type="danger">Danger</nord-badge>
<nord-badge type="highlight">Highlight</nord-badge>
</nord-stack>Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
type | type | The type of badge. Determines the color of the chip shown on the badge. | "warning" | "success" | "danger" | "highlight" | "info" | undefined | "info" |
Slots
| Slot name | Description |
|---|---|
| Default slot | The badge content. |
Usage #
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do #
- Use to show a status update on a piece of information or action.
- Use to mark something as a “draft” or “new”.
- Use when you want to highlight something that has been added recently.
- Use established color patterns so that users can clearly identify the importance level.
- Always position badge so that it’s clear to understand what object it’s related to.
Don’t #
- Don’t make badges clickable. Instead use button component’s small variant.
- Don’t use alternatives to existing badge variants.
Content guidelines #
Badge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:
When writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Avoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:
Always describe the status in the past tense:
Variants #
This section describes the different component variants, their purpose, and when to use each variant.
| Name | Purpose |
|---|---|
info | The default variant. Used to convey general information that isn’t critical. |
success | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful. |
highlight | Used to highlight specific items in the interface, like notifications. |
danger | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |
warning | Used to display information that needs a user’s attention attention and may require further steps. |
Integration
For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.
Localization
Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.
Troubleshooting
If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.