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
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-stack gap="s">
  <nord-badge>Neutral</nord-badge>
  <nord-badge variant="danger">Danger</nord-badge>
  <nord-badge variant="warning">Warning</nord-badge>
  <nord-badge variant="success">Success</nord-badge>
  <nord-badge variant="info">Info</nord-badge>
  <nord-badge variant="highlight">Highlight</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"
variantvariant

The style variant of the badge. Determines the background color of the badge.

"warning" | "success" | "danger" | "highlight" | "neutral" | "info" | undefined"neutral"
strongstrong

Strong badges are a secondary style for badges. They provide more visual prominence and emphasize them.

booleanfalse

Slots

Slot nameDescription
Default slot

The badge content.

icon

Used to place an icon at the start of badge.

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:

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

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.

Choose therapy brandChoose veterinary brandAbout Nord Design SystemGet support