shadcn.io is an independent project built on shadcn/ui
A star sits before the word Badge. The badge uses the primary fill and primary text. No variant is set, so this is the default.
Use it for the status you most want noticed, such as Featured. If clicking should filter a list, use a Button instead. In Solid, Ark UI keeps the label on one line.
Installation
Anatomy
Usage
<Badge>
<StarIcon aria-hidden="true" data-icon="inline-start" />
Badge
</Badge>FAQ
How does the star sit before the label in Solid?
The icon is the first child, with data-icon="inline-start" and aria-hidden="true". The badge styles size the svg and space it with the badge's gap, so the icon has no size class.
Does the star need its own color?
No. Lucide icons paint with currentColor, so the star uses the badge's text color and follows the variant, including in dark mode.
Which variant is this badge?
No variant is set, so it stays default, a primary fill. Set secondary, outline or destructive on Badge for those looks. The icon stays the first child.
API Reference
Badge
No extra props in this demo. The rest is on the Badge page.
