Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Badge with Link (Destructive) for Svelte

A destructive badge whose label Badge is a link that underlines on hover. The address in the file is #link.

UI library: Ark UI

The word Badge is a link in the destructive color. Hovering underlines it. The href in this file is #link, not a real page.

Use it when an error count should open its log. An on and off filter is a Button, not this link. In Svelte, Ark UI moves the badge styles onto the anchor so Tab can focus it.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Badge anatomy: root, icon, text

Usage

<Badge class="hover:underline" variant="destructive">{#snippet asChild(props)}<a {...props(/* <a> attributes; Ark types these as <span>'s */ { href: "#link" } as never)}>Badge</a>{/snippet}</Badge>

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.

API Reference

Badge

Sets variant="destructive". The rest is on the Badge page.

All 20 badge examples