shadcn.io is an independent project built on shadcn/ui
One cap shows a delete icon, hidden from assistive tech, then the label Del. It sits in a group of one. There is no delete handler.
Use Del when you mean the Delete key, and say Backspace if you mean that one. If the action cannot be undone, confirm in an Alert Dialog. In Vue, Ark UI does not delete on this key.
Installation
Anatomy
Usage
<div class="rounded-md border bg-background p-4">
<KbdGroup><Kbd><DeleteIcon aria-hidden="true" />Del</Kbd></KbdGroup>
</div>FAQ
Does this icon mean Delete or Backspace?
Lucide's Delete icon is a key shape pointing back with an X in it, like the ⌫ symbol, which usually means Backspace. Here it's paired with Del, so the label decides; for Backspace, change the label.
Should I document Delete and Backspace separately?
Yes, if both do something. Backspace removes the character before the cursor and Delete the one after it. On Mac, the key labeled delete is Backspace, and Fn delete is forward delete.
Should the delete key look destructive?
A Kbd is a label for a key, so keep it neutral. Put the warning on the action: a destructive Button or menu item next to the shortcut.
How do I make the delete key accessible?
The icon is hidden with aria-hidden, and the text Del is what screen readers read. Writing Delete in full, or adding it as visually hidden text, avoids the abbreviation.
Should the Delete key ask for confirmation?
For things that can't be undone, yes: open an Alert Dialog. For things that can, delete right away and offer undo; it's faster and just as safe.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
