Anatomy
- Background: Provides context or priority to the badge
- Icon: (Optional) Provides additional context to the Badge's message
- Label: Provides the message
Usage Guidelines
A Badge's primary purpose is to provide a quick visual cue, conveying a small, critical piece of information about a related item or component without being a distraction.
Too many badges can lead to "notification fatigue," where the user starts to ignore them. Use them sparingly and for truly important information that requires a user's attention. If every item has a badge, none of them feel important.
When to use this component
- Use to indicate status or state
- "Draft," "Pending," or "Published" on a document or a blog post to show its current state in a workflow.
- Use to categorize and differentiate items from each other.
- "Admin" or "Moderator" next to a user's name to indicate their role.
- Use when a status needs to be associated with an element
-
Use to help draw attention to new or updated information
When not to use this component
- Don’t use badges for actions. Use Button instead.
Best Practices
Use Badges to show the status of an interface element. Ensure the label clearly implies the sentiment, so color is not the only status indicator.
Place the Badge close to the element that is related to it.
Do not use alternative color codes to the types provided.
Use the inverted version of the badge to highlight it or draw attention to crucial statuses in the interface.
Do not mix inverted and non-inverted badges when used to portray statuses in the same context.
Do not use an icon after the label or by itself.
Do not be wordy. Use a simpler and scannable term instead. For example: “New”.
Ensure the label clearly implies the sentiment, so color is not the only status indicator.
General Component Behaviors
- Badges are a read-only visual indicator.
- The background color is contextual and can be used to emphasize a status, to inform or to associate information.
- When badges have a semantic meaning refer to the pre-defined colors and icons
- There is no technical restriction on the width of the component. It will grow until it reaches the edges of it’s parent container.
- Text will not break into multiple lines, wrap or ellipsis.
- Badges can be placed as floating in a container, or they can be fixed to any edge of a container.
Variants
No Icon
The badge has no icon.
Icon
Badge includes an icon before the label.
- Icons can be customized for Neutral and Accent and Info types only.
- Success, Warning, and Error use specific, semantic icons to represent their status and should not be changed.
Types
Neutral
Indicates a neutral status, such as no change in activity or a count of items and does not actively seek user attention.
Accent
Highlights content using the brand color, without implying a specific status or category.
Info
Indicates an informational status related to the current context, without requiring action.
Success
Indicates a positive status or outcome, such as a completed action or improvement.
Warning
Indicates a potentially problematic status or outcome that may require attention, but is not yet critical.
Danger
Indicates a critical / negative status or outcome that should be brought to the user’s attention.
Style
Default
Standard appearance for most use cases.
Inverted
Higher visual emphasis to draw more attention.
Content Guidelines
- Use clear and concise language (ideally no more than 2 words) when writing text for badges.
For further information, see the Content Styleguide.