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.