Clinia UI

Kbd

Shows a keyboard key or shortcut.

shadcn docs →

When to use

  • Show a keyboard shortcut in text, a tooltip or a menu.
  • Show the keys of a combination, grouped with KbdGroup.

When not to use

  • A status or a tag: use Badge.
  • Code or a value to copy: use inline code.

Install

npx shadcn@latest add @clinia/kbd

CommandKorCtrlK

Press Esc to close the panel.

Clinia rules

  • Name keys the way the keyboard prints them: ⌘, Ctrl, Esc, Enter. Show both the Mac and the Windows keys when they differ.
  • Kbd is text-xs on bg-muted, and switches to a translucent background surface inside a Tooltip.

Do and don't

Press CtrlK to search records.

Do use Kbd for the keys users press.

Patient intake Draft

Don't use Kbd as a status tag. Use Badge.

Accessibility

Built in

  • KbdGroup wraps the keys in an outer kbd, the HTML pattern for a key combination.

Your responsibility

  • Screen readers read symbols like ⌘ inconsistently. Add sr-only text such as Command, or write the key name.
  • Kbd only describes a shortcut. Build the shortcut itself, and don't take over keys that screen readers or browsers use.

How to test

  1. With a screen reader, the shortcut is read as keys you could press.
  2. Press the shortcut: it does what the text says.

API

Every prop comes from the native kbd element.

Related