Badge
Colored text label to highlight information
Introduction
Badges are small visual cues that highlight important information with a short, single-word label. They help draw attention to things like status or updates and are purely visual, not interactive.
Variants
- Basic badge: Standard badge style that works well in most situations.
- Pill badge: Rounded edges for a softer, more approachable look, often used alongside title.
Interactive demo
Try the interactive demo below to explore different badge states and styles.
Best practices
- Keep it short: Use concise, single-word or short-phrase labels to ensure clarity and quick comprehension.
- Context matters: Always place badges in context with other elements (e.g., titles, table rows) to convey their meaning effectively.
- Limit usage: Avoid overloading interfaces with too many badges; use them sparingly to highlight the most important information.
- Consistent styling: Stick to a consistent style (basic or pill) throughout your application to maintain a cohesive look and feel.
- Color coding: Use state colors (e.g., success, warning, alert) thoughtfully to convey meaning without overwhelming users.
Examples
An expample of good and bad badge usage:
Keep the text short and clear. The badge should be placed in context of something else, such as a title or a table row.
Avoid having long sentences in a badge. If more details are needed, use Tooltip or Message instead.
Inverted colors
The inverted color badge offers higher contrast, making it ideal for emphasizing important information. Both badge variants support inverted colors. Give it a try in the interactive demo above!
State colors
Badges can use state colors to indicate different statuses or levels of importance.
Success, warning, attention and alert
Bifrost has state colors for success, warning, attention, and alert, that can be used to convey different meanings:
- Success: Indicates a successful operation or positive status
- Warning: Signals a cautionary status that may require attention
- Attention: Highlights information that needs user attention but is not critical
- Alert: Denotes a critical issue that requires immediate action
Brand, chill, neutral : Info badge
Information badge is used to communicate general information or updates. By default, we use the Brand color for Info badges, but you may use Chill as an alternative. If you prefer a more subtle appearance, use Neutral instead.
Usage
There are various scenarios of use cases for using badge. Here are some examples:
Badge with tooltip
To provide additional context or information, use tooltips when hovered over the badge. Tooltips can enhance the badge's meaning and provide extra details without cluttering the interface. For more information about tooltips, see the Tooltip documentation.
Title and badge
Badges can be effectively used alongside titles to indicate status or categories. In this example, a pill badge with inverted colors is used next to the title to signify that the laptop order has been sent successfully. Inverted colors helps to highlight the message, but you can choose the standard colors based on your design needs.
Badges in components
Badges can be used within various components to enhance their functionality and provide quick labels or status indicators.