shadcn.io is an independent project built on shadcn/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 Solid, Ark UI moves the badge styles onto the anchor so Tab can focus it.
Installation
Anatomy
Usage
<Badge asChild={props => <a {...props()} href="#link">Badge</a>} class="hover:underline" variant="destructive" />FAQ
How does this badge become a link in Solid?
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 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.
API Reference
Badge
Sets asChild and props. The rest is on the Badge page.
