shadcn.io is an independent project built on shadcn/ui
The word Badge is a link with the primary fill. Hovering underlines it. No variant is set. The href in this file is #link.
Use it for a blog tag or a category that goes to a filtered page. This pattern is not an on and off filter. That is a Button. In Vue, Ark UI moves the badge styles onto the link.
Installation
Anatomy
Usage
<Badge :asChild="true" class="hover:underline"><a href="#link">Badge</a></Badge>FAQ
How does this badge become a link in Vue?
This demo underlines the link on hover.
Pass asChild and put an a inside, as this file does, so the badge styles move onto the link. class="hover:underline" is on Badge.
Use a real URL, not #.
Which variant is the link?
No variant is set, so the link keeps the default colors. That variant also adds a hover background when the badge is an anchor. hover:underline is the extra cue in this file.
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 asChild. The rest is on the Badge page.
