shadcn.io is an independent project built on shadcn/ui
Destructive color, the label, and a badge with the number. The demo shows 3. Show the real selection so people see the size of the delete before they press.
Use it for Delete selected, and disable it when the count is zero. If the delete cannot be undone, confirm in an Alert Dialog. In Solid, Ark UI does not track the selection.
Installation
Anatomy
Usage
<Button variant="destructive">
Button
<Badge class="border-destructive/30 text-destructive" 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 destructive button?
variant="destructive" is the light danger fill with danger-colored text. The badge is variant="outline" and pill, with border-destructive/30 text-destructive, so the number uses the danger color.
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="destructive". The rest is on the Button page.
Badge
Sets pill and variant="outline". The rest is on the Badge page.
