shadcn.io is not affiliated with official shadcn/ui
Button examples · Destructive
Button with Kbd (Destructive) for React
A destructive button with a keyboard hint beside the label, when a dangerous action has a shortcut you still want visible.
Destructive color, and a kbd that shows ⌘K. A shortcut on delete is easy to hit by mistake. Only show it if you really bind it, and make it more than one key.
Use it rarely, for a command power users already expect. Most deletes are safer as a click plus an Alert Dialog. In React, Base UI will not stop the key from firing.
Preview
Installation
FAQ
Does pressing ⌘K activate this Button?
No. Kbd draws the characters ⌘K. It doesn't register a listener, and it's pointer-events-none, so the click still hits the button. The shortcut itself belongs in your own handler.
How do I show a different shortcut?
Change the children of Kbd. The demo doesn't translate Mac and Windows keys, so write the label for the platform you mean, such as Ctrl B when a symbol would be unclear.
How is the key cap colored here?
variant="destructive" is the light danger fill with danger-colored text. The cap uses bg-destructive/15 and text-destructive, so the hint stays in the danger color.
Can I put the shortcut before the label?
Yes. Move Kbd ahead of the text. In this demo it follows the label, which is the usual place for a hint on the trailing side.
Should a destructive shortcut confirm first?
If the action can't be undone, yes. The cap doesn't confirm anything. Open an Alert Dialog from the handler you write.
Related
- Button with Text (Destructive)Delete, in the danger color
- Button with Left Icon (Destructive)An icon on a delete
- Simple Command DialogA button that opens a command dialog with
- Simple Delete Confirmation Alert DialogA simple delete confirmation with a
- Button with Kbd (Standard)A shortcut on the main action
- Button with Count (Destructive)How many the delete covers