React Badge with Text
A neutral outlined badge for secondary status, tags, and non-urgent metadata display
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Subtle borders without backgrounds keep interfaces clean. This React badge uses shadcn/ui's outline variant for secondary information that matters but doesn't demand immediate attention. Built with border-only styling and no background fill, the outline approach creates visual hierarchy without overwhelming primary content. Perfect for tags, categories, metadata labels, or any status indicator needing presence without prominence—the outlined badge whispers instead of shouts while remaining scannable.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-outline-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-outline-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-outline-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-outline-1.jsonRelated patterns you will also like
Outline with Link
Clickable outlined badge
Outline with Icon Left
Icon-enhanced outlined badge
Standard Badge
Default filled badge variant
Secondary Badge
Muted filled badge variant
Circular Outline Count
Round outlined count badge
Destructive Badge
Error state badge