React Badge with Link
A clickable secondary badge with subdued gray styling for subtle filtering and navigation
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Clickable badges don't always need bold colors—sometimes subtle works better. This React badge combines variant secondary with link wrapping for muted gray clickable category filters or tags. Built with shadcn/ui, the hover:underline provides interaction cues without overwhelming. Perfect for supplementary navigation, secondary category links, tag clouds, or filtering systems where links should be discoverable but not dominant in the visual hierarchy.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-secondary-2.jsonRelated patterns you will also like
Static Secondary Badge
Non-clickable gray badge
Primary Badge Link
Bold clickable badge
Secondary Icon Badge
Gray badge with icon
Outline Badge Link
Minimal clickable badge
Secondary Filter
Subtle filter controls
Tag Link
Clickable tag patterns