Button with Count (Destructive) for React

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.

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.

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.

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.

The badge sizes to its text, so 1482 widens the button. Format the children before you pass them if you want a shorter label, such as 99+. The component won't abbreviate them.

The badge text is inside the button, so this demo is announced as its label plus 3. Set aria-label on the button, such as Delete 3 items, when the visible words aren't a full phrase.