React Badge with Text
A subdued gray badge with secondary variant for neutral information and less prominent labels
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-1.jsonRelated patterns you will also like
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