React Badge with Link
An interactive badge containing a clickable link for filtering content or navigating to related items
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes badges need to be more than labels—they need to be gateways. This React badge wraps a link with hover:underline styling, transforming static indicators into clickable filters or navigation. Built with shadcn/ui and standard anchor elements, users can click category badges to see all items in that category or status badges to filter by state. Perfect for blog post tags, product category filters, issue labels in project management, or any context where badges should navigate to filtered views.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-standard-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-standard-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-standard-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-standard-2.jsonRelated patterns you will also like
Static Badge
Non-interactive badge for labels
Badge with Icon
Badge with icon for visual context
Secondary Badge Link
Subtle clickable badge variant
Link Button
Button-styled link component
Interactive Tag
Removable or clickable tag patterns
Filter Badge
Badges for filtering content