Shadcn.io is not affiliated with official shadcn/ui
Badge with Text
A subdued gray badge with secondary variant for neutral information and less prominent labels
Not every badge needs to shout—sometimes you just need subtle context. This React badge uses variant secondary for muted gray styling that provides information without demanding attention. Built with shadcn/ui, the neutral background works for draft states, pending statuses, or general categorization where prominence would be distracting. Perfect for metadata labels, document states, secondary tags, or any context where badges should inform without overwhelming primary content.
Badge with Text preview
Installation
Related Components
Primary Badge
Bold primary-colored badge
Secondary Badge Link
Clickable subtle badge
Outline Badge
Bordered minimal badge
Secondary Icon Badge
Gray badge with icon
Destructive Badge
Red error badge
Secondary Label
Subdued label component
FAQ
Was this page helpful?
Sign in to leave feedback.