Badge Alert
The Badge Alert component is a simple, non-interactive numeric indicator designed to display counts or notifications. It automatically caps numbers above 99 and supports both default and negative states.
Basic usage
The Badge Alert component displays numeric values and automatically formats numbers greater than 99 to "99+". It's commonly used to show notification counts, unread messages, or other numeric indicators.
Component anatomy
Content Display
The component handles numeric content with built-in formatting:
- Numbers 1-99 display as is
- Numbers greater than 99 display as "99+"
- Empty or zero values are not displayed
Theme
The Badge Alert supports two visual themes:
- Default state with standard styling
- Negative state for contrast or emphasis
Sizing
The Badge Alert has fixed dimensions with:
- Minimum width to accommodate content
- Fixed height
- Automatic horizontal padding
- Centered content alignment
Accessibility
Non-interactive Nature
The Badge Alert is intentionally non-interactive, marked with the inert attribute to indicate it should not receive focus or interaction.
Screen Reader Considerations
While the component is non-interactive, consider these practices:
- Use in conjunction with properly labeled interactive elements
- Ensure the numeric value is properly announced in context
- Consider ARIA live regions if the value updates dynamically
Color Contrast
Both default and negative states maintain proper contrast ratios for:
- Text against background color
- Background color against parent element
Best Practices for Developers
Contextual Usage DEMO HERE
Dynamic Updates DEMO HERE
Placement Guidelines DEMO HERE