Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Button with Text (Destructive) for Solid

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

UI library: Ark UI

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 Solid, Ark UI only changes the look. You still handle the click.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Part of Pro

Anatomy

Button anatomy: root, icon, text

Usage

<Button variant="destructive">Button</Button>

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.

API Reference

Button

Sets variant="destructive". The rest is on the Button page.