Badge

Usage

Badges are placed before/after the label of the thing they're quantifying, such as the number of notification/document received. They should only be used to represent a number, however, the following letters and special characters can be used to represent number values: + (represent more) or K (represent thousands).

Example

257K999+999+

Rules

Use badges in conjunction with a single item or label, to avoid ambiguity around which item is being quantified. Suggestion: 3 digit number max, excl. the special character.

Color Tone

Primary (brand) color

Available color based on product brand color use, but limited to what design system provided

2525

State color

This tone only has 3 color variants based on status, which are orange, red, and green

2525252525252525

Level color (customizable and optional)

The level refers to what state the user is in or objects being tagged, such as premium account or document labeling based on category

2525

Default color

This color is commonly used in any situation and condition

2525

Pattern Rule

Best Practice

• Using established color patterns so that merchants can quickly identify their status or importance level.
• Being clearly labeled with short, scannable text.
• Being positioned to clearly identify the object they’re informing or labelling.

Do

• 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.
• Use established color patterns so that users can clearly identify the importance level.
• 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.
• Don’t use alternatives to existing badge options. Only create a new badge option if there aren’t any existing options to communicate the status you need.