Badge
Badges are small, attention-catching UI elements used to display concise status information, counts, or labels. They help users quickly identify important attributes, system states, or numerical indicators within an interface. Badges are designed to be flexible, lightweight, and easily adaptable across various contexts, including lists, cards, tables, navigation items, and action components.
Color Variants
Badge colors convey meaning through a consistent visual language. Each color communicates a specific semantic purpose:
- Red - Indicates errors, critical states, warnings, or required attention.
- Green - Represents success, confirmation, completed actions, or positive states.
- Blue - Used for neutral info, system messages, or general labels.
- Yellow - Highlights warnings, pending actions, or items requiring review.
- Violet - Used for special categories, premium or custom tags, or neutral decorative labels.
1. Red Badge
Used for errors, critical states, warnings, or required attention.
2. Blue Badge
Used for neutral info, system messages, or general labels.
3. Yellow Badge
Highlights warnings, pending actions, or items requiring review.
4. Green Badge
Represents success, confirmation, completed actions, or positive states.
5. Violet Badge
Used for special categories, premium or custom tags, or neutral decorative labels.
Sizes
Badges come in three sizes to support different UI densities and hierarchy levels:
- Small (S) - Compact size suitable for tables, toolbars, menu items, and dense interfaces
- Large (L) - Default size used in most layouts, cards, and lists
- Extra Large (XL) - High-visibility option for dashboards or key status indicators
Number Badges
Designed specifically for numerical indicators such as unread counts, notifications, or item totals.
Number Badge - Blue
Number Badge - Green (Positive)
Number Badge - Yellow (Warning)
Number Badge - Red (Negative)
Usage Examples
Real-world examples of how badges can be used in different contexts.
Notification Indicators
Status Labels
Category Tags
Product Categories:
Priority Tags:
Types
Badges are available in two content types:
1. Text Badge
Used for short labels such as statuses ("Active", "New", "Blocked"), categories, or metadata tags.
- • Supports short words and abbreviations
- • Automatically adjusts padding based on content length
- • Best for highlighting contextual attributes
2. Number Badge
Designed specifically for numerical indicators such as unread counts, notifications, or item totals.
- • Uses a fixed rounded shape for consistency
- • Automatically caps large values (e.g., "99+")
- • Ideal for real-time or system-generated data points
Usage Guidelines
- ✓ Use Text Badges for descriptive status labels
- ✓ Use Number Badges for dynamic counts or steps of the flow
- ✓ Place badges near related content (e.g., next to titles, inside cards, or above icons)
- ✓ Choose size based on layout density and the importance of the information
- ✗ Don't use badges as clickable elements (they are non-interactive by default)
- ✗ Don't use long text in badges - keep labels concise
Behavior & Styling Rules
- • Badges are non-interactive by default but can be paired with clickable elements
- • Text always remains horizontally centered
- • Rounded radius adjusts according to size for visual balance
- • Number Badges automatically maintain minimum width for readability
- • Colors must meet contrast accessibility requirements for legible text