Badges

Interactive Demo

This demo lets you preview the Badge component, its variations, and configuration options.

For examples of all variants, please visit Storybook.

---

Badge Types

There are five badges.

1. Text Badge

Text badge includes an optional icon and text label. Text badge can be contained within a component or layout to give user additional feature context, for example, a status.

2. Marketing Badge

Marketing badges are for marketing messages and insights. Marketing badge consists of a ribbon with a text label, and optional icon. The badge offers three different shapes depending on location on the card or UI usage.

3. Number Badge

Use secondary for the less important or alternative action on a page. Secondary buttons are styled to be minimal and less noticeable, ensuring they do not distract from more important actions on the page.

4. Dot Badge

Dot badge is used to indicate that something is actionable, without telling user the exact number of the actionable items.

5. Status Badge

Status badge consists of a colored dot and text label. When there are two or more, both colors and text label are required to differentiate. When only one status badge is used, label is optional.

---

What’s New

1. Styling change of previous text alert badge
2. Removed outlined badge
3. Updated spacing to use new v7 tokens

See full release notes