Shadcn.io is not affiliated with official shadcn/ui
Button with Kbd
A destructive button displaying keyboard shortcut hint for power users to delete via hotkeys
Power users love keyboard shortcuts—faster than clicking. This React button combines shadcn/ui's destructive variant with Kbd component showing keyboard shortcuts using semi-transparent white styling. Built with bg-white/20 for subtle contrast against red background and gap-2 spacing between label and shortcut indicator, it teaches discoverability of hotkeys for dangerous actions. Perfect for modal close buttons with Escape shortcut, delete confirmations with ⌘D hotkey, or admin panels showing Ctrl+Shift+Delete for bulk removal—the visible shortcut reduces mouse dependency while maintaining clear danger signal through destructive red coloring.
Button with Kbd preview
Installation
Related Components
Standard Destructive
Basic delete without keyboard hint
Destructive with Icon
Icon-enhanced delete button
Kbd Component
Standalone keyboard shortcut display
Command Menu
Keyboard-first command interface
Destructive Dialog
Dangerous action confirmation
Primary with Kbd
Keyboard shortcut on primary button
FAQ
Was this page helpful?
Sign in to leave feedback.