shadcn.io is an independent project built on shadcn/ui
The word Badge is a link on a muted fill. Hovering underlines it. The href in this file is #link.
Reach for it on supporting tags that should be easy to find but should not lead the page. An on and off filter is a Button. In Svelte, Ark UI makes the badge a link.
Installation
Anatomy
Usage
<Badge class="hover:underline" variant="secondary">{#snippet asChild(props)}<a {...props(/* <a> attributes; Ark types these as <span>'s */ { href: "#link" } as never)}>Badge</a>{/snippet}</Badge>FAQ
How does this badge become a link in Svelte?
This demo underlines the link on hover.
Pass asChild and spread the props it gives you onto an a. The underline class is class="hover:underline" on Badge.
Use a real URL, not #.
What does variant secondary change on the link?
variant="secondary" keeps the muted secondary fill and secondary-foreground text on the link. The variant adds a hover background when the badge is an anchor, 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.
API Reference
Badge
Sets variant="secondary". The rest is on the Badge page.
