Badge Icon
The Badge Icon component is a small, non-interactive visual indicator that displays an icon with various semantic states.
Basic usage
The Badge Icon component requires an icon name and optionally supports different themes and states.
Component anatomy
Theme
The Badge Icon supports three semantic themes:
- Neutral: Default state
- Success: Positive outcomes
- Danger: Error or warning states
Each theme provides appropriate background and icon colors, with support for both light and dark modes.
Negative State
All themes support a negative variant for use on dark backgrounds, maintaining proper contrast and visibility.
Size
The Badge Icon uses a fixed size (XXS) optimized for small visual indicators, with:
- Consistent icon size
- Balanced padding
- Circular shape via border-radius
Accessibility
Non-interactive Nature
The Badge Icon is intentionally non-interactive, marked with the inert attribute to indicate it should not receive focus or interaction.
Decorative Purpose
As a visual indicator, the Badge Icon is treated as decorative content. However, when used to convey status or information:
- Ensure surrounding context provides adequate explanation
- Consider using ARIA labels on parent elements
- Include in descriptions for screen readers when meaningful
Color and Contrast
Each theme maintains proper contrast ratios in both light and dark modes:
- Icon color against background
- Background color against surrounding content
- Negative variants for dark backgrounds
Best Practices for Developers
Semantic Usage DEMO HERE
Context Pairing DEMO HERE
Status Indication DEMO HERE