shadcn.io is an independent project built on shadcn/ui
Secondary fill and a badge. The demo shows 3. The number should match what the button acts on, not sit there as decoration.
Use it for a quieter list action, like Archive selected, next to a stronger button. If the count is why people came, use the default Button. In Svelte, Ark UI shows whatever number you pass to the badge.
Installation
Anatomy
Usage
<Button variant="secondary">Button<Badge pill variant="outline">3</Badge></Button>FAQ
Is the 3 a live count?
No. The Badge children are the characters 3. Nothing in the demo reads a selection or updates the number. Pass your count as the badge's children.
How is the badge colored on a secondary button?
variant="secondary" is the quieter fill. The badge is variant="outline" and pill, a round outline on that fill.
Should I disable it when the count is 0?
When a delete with nothing selected shouldn't run, pass disabled yourself. The demo always shows 3 and stays enabled. Hide the button only when that action isn't part of the screen.
How do I show singular and plural?
The badge is only the number. Put the noun on the button, such as Delete, or write the whole phrase as the button's children. This demo doesn't pick a plural form for you.
API Reference
Button
Sets variant="secondary". The rest is on the Button page.
Badge
Sets pill and variant="outline". The rest is on the Badge page.
