Badges inform people of the status or tone of an object, or of an action that has been taken.
Figma
The Figma reference for Badge will appear here once the design link is added.
Storybook
Interactive examples for Badge will render here once the Storybook link is wired in.
Best practices
- Use established color/tone patterns so people can quickly identify status or importance.
- Label badges with short, scannable text.
- Position each badge so it clearly identifies the object it’s labeling.
- Describe status in the past tense — for example, “Refunded”, not “Refund”.
Do’s and don’ts
Do
Reuse an existing badge tone that communicates the state you need.
Don’t
Invent a new badge tone when an existing one already communicates it.
Do
Use a single word, or two words for a complex state: “Sold”, “Reserve not met”.
Don’t
Write long phrases or sentences inside a badge.