Skip to contentSkip to navigation
DocsDocs

Kbd

Key caps that show a key, or keys pressed together.

StableSince 1.0.0
On this page

Overview

Show code, ShortcutsInText.tsx

Key hints under a list.

Show code, KeyHints.tsx

Anatomy

  1. Combination

  2. Key cap

  3. Separator

Show code, KbdAnatomy.tsx

Rules

Show the keys people really press.

Use it when

  • A key or a shortcut named in text
  • Hints of the keys a list or a popup handles
DoA sequence as one Kbd per step, with then between them.
Show code, ShortcutSequence.tsx
Don’tA sequence as one combination: it reads as four keys pressed at once.
Show code, SequenceAsOne.tsx

Shortcuts

Show only shortcuts the application handles.

Content

Write keys as the keyboard names them: Ctrl, Shift, Esc, F2, capital letters, and ←, →, ↑, ↓.

  • Use the names of the reader's platform, such as ⌘ on Apple keyboards.
Show code, PlatformKeys.tsx

Related

  • The shortcut of a menu item, which also needs to reach assistive technology.

  • Key hints in the footer of a quick-open dialog.

  • Code, a command or a file name in text.