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