React Badge with Link
A clickable destructive badge with link for navigating to error details or problem resolution pages
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Destructive badges that do something beat static red labels. This React badge wraps a link in shadcn/ui's destructive variant for clickable error indicators. Built with hover underline for affordance, the linked badge invites users to investigate problems and find solutions. Perfect for error counts linking to logs, failed status linking to retry pages, critical alerts linking to details, or any urgent indicator where users need more context—makes problems actionable instead of just visible.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/badge-destructive-2.jsonRelated patterns you will also like
Destructive Text
Non-interactive destructive badge
Destructive with Icon
Icon-enhanced linked badge
Outline with Link
Neutral linked badge variant
Standard with Link
Default linked badge
Error with Actions
Error alert with action buttons
Circular Count Badge
Round notification badge