Active theme set to Nord LightNord DarkVet LightVet DarkHealth LightHealth Dark and saved in preferences.
Copied to clipboard.

Badge draft

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

PropertyAttributeDescriptionTypeDefault
typetypeThe type of badge. Determines the colour of the chip shown on the badge."warning" | "success" | "danger" | "highlight" | "info" | undefined"info"

Slots

Slot nameDescription
Default slotThe badge content.