Active theme set to LightDarkLight high contrastDark high contrast and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.
We’re hiring frontend developers! View open positions.

BadgeReady

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.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-stack direction="horizontal" gap="s" wrap>
  <nord-badge type="success">Success</nord-badge>
  <nord-badge type="progress">Progress</nord-badge>
  <nord-badge type="info">Info</nord-badge>
  <nord-badge type="highlight">Highlight</nord-badge>
  <nord-badge type="neutral">Neutral</nord-badge>
  <nord-badge type="warning">Warning</nord-badge>
  <nord-badge type="danger">Danger</nord-badge>
</nord-stack>

Properties

PropertyAttributeDescriptionTypeDefault
typetype

The type of badge. Determines the background color of the badge.

"warning" | "success" | "danger" | "highlight" | "info" | "neutral" | "progress" | undefined"neutral"
progressprogress

The progress of the badge. Displays a progress indicator next to the label.

"cancelled" | "complete" | "incomplete" | "partially-complete" | undefinedundefined

Slots

Slot nameDescription
Default slotThe badge content.

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 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:

Complete
Action completed

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):

Partially refunded
Partially Refunded

Avoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:

Pending
Item is pending

Always describe the status in the past tense:

Refunded
Refund

Variants #

This section describes the different component variants, their purpose, and when to use each variant.

NamePurpose
neutralThe default style variant.
infoUsed to convey general information that isn’t critical.
successUsed to convey success states. For example, you might want to show a badge that tells the user a payment was successful.
highlightUsed to highlight specific items in the interface, like notifications.
dangerUsed to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors.
warningUsed to display information that needs a user’s attention attention and may require further steps.
progressUsed to convey something that’s in progress.

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.

Integration Guidelines

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.

Localization Guidelines

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.

Was this page helpful?

YesNoSend feedback

We use this feedback to improve our documentation.