Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Badge examples · Destructive

Badge with Link (Destructive) for React

A destructive badge rendered as a link that underlines on hover, leading to error details.

Framework
UI library

A destructive badge that does something beats a static red label. This React badge renders a link in the Badge component's destructive variant, with hover:underline as the cue, so people can go straight from the problem to its details. Use it for error counts that open the log, failed statuses that open the retry page or critical alerts that open the incident: it makes a problem actionable instead of just visible.

Preview

Preview width
Badge

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What does variant destructive change on the link?

variant="destructive" keeps text-destructive and bg-destructive/10 on the link. Hover deepens that tint, and this file adds hover:underline.

Can I reach the link from the keyboard?

Yes. It is an a with an href, so Tab focuses it and Enter follows it. Screen readers announce a link.

Should a toggle filter be this badge?

No. This pattern goes to another page. An on and off filter is a Button or a toggle.

Why doesn't the link text wrap?

The badge is whitespace-nowrap, so the label stays one line. Keep it to a word or two.

Can this link use another variant?

Yes. Set variant on the same Badge. The values are default, secondary, outline, ghost, link, destructive, info, success and warning.

All 20 badge examples