Shadcn.io is not affiliated with official shadcn/ui
Badge with Link
A clickable outlined badge with link for navigating to tag pages, category filters, or metadata details
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.
Badge with Link preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.