Components
A visual indicator for a value or status descriptor for UI elements.
The default form of solid color badges.
Predefined outline color badge styles.
Simple example with truncate.
Avoid truncation wherever possible by using shorter text in badges. The truncated text is not focusable or accessible.
Use icon to show indication.
Add the animate-ping
utility to make an element scale and fade like a radar ping or ripple of water — useful for things like notification badges.