Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - Delete with Icon
A React keyboard key displaying Delete with X icon using shadcn/ui Kbd and Lucide React for visual delete key representation
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Delete means remove—make it visual. This React pattern shows Kbd with Delete icon from Lucide React plus Del text—combines the universal X symbol for deletion with text label. Built with shadcn/ui Kbd component, it's perfect for text editor documentation, file manager shortcuts, destructive action warnings, keyboard reference guides, or any interface documenting the Delete key that removes content forward from cursor.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Enter with Icon
Enter key with icon
Unicode Symbols
Unicode delete symbols
Special Keys
Special key text only
Destructive Button
Delete button component
Destructive Alert
Warning for deletions
Keyboard Shortcut
Standard shortcut display
Questions you might have
React kbd - Enter with Icon
A React keyboard key displaying Enter with CornerDownLeft icon using shadcn/ui Kbd and Lucide React for visual enter key representation
React kbd - Arrow Keys with Icons
A React keyboard display showing arrow keys with directional icons using shadcn/ui KbdGroup and Lucide React for navigation documentation