Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button examples · Destructive

Button with Text (Destructive) for React

The destructive color, for delete, remove, or anything hard to undo, when the color should warn before the click.

Framework
UI library

Destructive tints the button with the destructive color. The label still has to say what happens. The color is not a substitute for the words.

Use it for Delete or Remove. If it wipes an account or a lot of rows, confirm first in an Alert Dialog. In React, the variant only changes the look. You still handle the click.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What color is a destructive Button?

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.

When should I use the destructive variant?

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.

Should a delete ask before it runs?

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.

How do I change the label?

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.

What happens if I disable it?

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.

Will this submit the form it's in?

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

All 35 button examples