Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Kbd examples · With Icons

Delete with Icon Kbd for React

A Del key with a delete icon before its label.

Framework
UI library

A delete key reads faster with its shape next to the word. This React example puts Lucide's Delete icon, hidden from screen readers, before the label Del inside one Kbd cap. The Kbd lines up the icon and text with a small gap and sizes the icon to the text.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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.

Is the Delete key labeled the same everywhere?

No. German keyboards say Entf, French ones Suppr, and many Mac keyboards show only a symbol. The icon helps people recognize the key whatever its label.

All 39 kbd examples