Badge Status
The Badge Status component is a flexible indicator that combines text and optional icons to represent various states or statuses.
Basic usage
The Badge Status component displays text content with optional icon support and multiple theme variations.
Component anatomy
Theme
The Badge Status supports six semantic themes:
- Neutral: Default state
- Success: Positive outcomes
- Danger: Error states
- Alert: Warning states
- Info: Informational states
- News: Update or announcement states
Each theme provides appropriate colors for background, text, and icon.
Icon Support
The component supports optional icons with:
- Position control (before/after content)
- Customizable weight and style
- Consistent sizing (XXS)
- Theme-specific coloring
Content Display
Content can be provided through:
- Text input
- Content projection
- Combined with icons
- Automatic word breaking for long content
Negative State
All themes support a negative variant for use on dark backgrounds, maintaining proper contrast and visibility.
Accessibility
Text Display
The component uses typography label-4 class for consistent and readable text presentation. Long content is handled with proper word breaking to maintain readability.
Color Contrast
Each theme maintains proper contrast ratios for:
- Text against background
- Icon against background
- Background against surrounding content
- Negative variants for dark backgrounds
Content Structure
When using icons with text:
- Consistent spacing between elements
- Logical reading order
- Clear visual hierarchy
Best Practices for Developers
Semantic Usage DEMO HERE
Content Guidelines DEMO HERE
Icon Pairing DEMO HERE