Badge
Badge presents concise contextual information without taking ownership of actions or application state.
Preview
NeutralAccentStableReviewAttentionInformation
Capabilities
- Offers neutral, accent, success, warning, danger, and info appearances.
- Supports status labels, technology tags, and short supporting information.
- Keeps status text visible so meaning is not conveyed by color alone.
Limitations
- Does not provide button or link behavior.
- Does not manage the state that a label describes.
Accessibility
Uses readable text inside a span. Status meaning must remain explicit in its label, not depend on appearance alone.
- Server compatible
- Yes
- Source path
components/ui/badge.tsx