React Badge with Link
A clickable outlined badge with link for navigating to tag pages, category filters, or metadata details
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Outlined badges that go somewhere turn passive labels into navigation. This React badge wraps a link in shadcn/ui's outline variant for clickable tags and categories. Built with hover underline for affordance, the linked outline badge invites exploration without the visual weight of filled badges. Perfect for tag clouds linking to filtered views, category badges linking to taxonomy pages, metadata labels linking to detail views, or any secondary navigation where subtlety matters—makes information explorable instead of just displayable.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-outline-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-outline-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-outline-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-outline-2.jsonRelated patterns you will also like
Outline Text
Non-interactive outlined badge
Outline with Icon
Icon-enhanced linked badge
Standard with Link
Default linked badge variant
Destructive with Link
Error state linked badge
Circular Outline Count
Round outlined count badge
Breadcrumb Navigation
Hierarchical navigation links