Usage
Badges inform users of the status of an object or of an action that's been taken. They're commonly used in tabular data to indicate status, and can carry an optional icon in the icon slot.
import "@nordhealth/components/lib/Badge"
Examples
Variants
The variant attribute sets the badge colour to communicate meaning, from strongly positive through neutral to strongly negative.
With icon
Place an icon in the icon slot to reinforce the badge's meaning.
Strong
The strong attribute is a secondary style that gives the badge more visual prominence.
Inline with text
A badge sits inline alongside headings or other text.
Variant scale
How each variant maps onto the strongly-positive through strongly-negative scale.
Progress states
Use badges with icons to communicate progress, from complete through cancelled.
In a table
Badges commonly indicate row status in tabular data.
Vertically aligned with text
A badge aligned alongside a value and supporting text, as in a metric summary.
RTL
Badges follow the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- A badge conveys meaning through colour, so make sure the text content states the status clearly on its own. Don't rely on colour alone.
- When you add an icon in the
iconslot, give it alabelif the icon carries meaning the text doesn't already convey; otherwise leave it unlabelled so it stays decorative. - Keep badge text short and descriptive so it remains readable at the badge's small size.
API reference
Badge
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-badge></nord-badge>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
variant | variant | The style variant of the badge. Determines the background color of the badge. | 'warning' | 'success' | 'danger' | 'highlight' | 'neutral' | 'info' | undefined | "neutral" |
strong | strong | Strong badges are a secondary style for badges. They provide more visual prominence and emphasize them. | boolean | false |
Slots
| Slot name | Description |
|---|---|
Default slot | The badge content. |
icon | Used to place an icon at the start of badge. |
Design guidelinesFor designers
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use established variants and color patterns so that users can clearly identify the importance level.
- 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.
- Always position badge so that it’s easy 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.
- Don't use badges for labeling, categorizing, or organizing objects. Use the tag component instead.
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 |
|---|---|
neutral | The default style variant. |
info | 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. |
progress | Used to convey something that’s in progress. |