Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Button with Kbd
A destructive button displaying keyboard shortcut hint for power users to delete via hotkeys
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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