Button with Text (Destructive) for React

variant="destructive" uses the danger color as a light fill, with danger-colored text. Hover deepens the tint. It reads as a warning sitting next to a primary button.

For an action that removes something or can't be undone: Delete, Remove, Revoke. A normal Save stays on the default variant. One destructive button in a group is usually enough.

When it can't be undone, open an Alert Dialog from the click and put this variant on the confirm. The button in the demo only shows the color.

Replace Button with the action, and name the thing being removed when you know it. Delete selected is clearer than a bare Delete once a count is involved.

disabled fades the danger tint and ignores the click. Use that when nothing is selected yet. The button stays on the page so the action is still findable.

Not with the default type="button". Pass type="submit" only if this delete is the form's submit. Most deletes shouldn't be.