Kbd

A keyboard key or shortcut, in text, in a tooltip or on a button. Specification: docs/components/kbd.md

Size

⌘K ⌘K ⌘K ⌘K

data-size sm, md and lg, then without it.

Inherited from a container, with an override

Esc Tab Space

Content

One canon-kbd per shortcut, written as the platform writes it. Sequences are several, with words between.

Single keys

Esc Enter ↵ Tab / ? ↑ F11

Shortcuts

⌘K ⇧⌘P ⌥⌘I Ctrl K Ctrl Shift P Alt F4

Sequences

G then I opens the inbox.

In context

In running text

Press ⌘K to search, or Esc to close any panel.

Larger text, larger keys: press ⌘K to search.

In a tooltip

Shown open. After the text, apart from it.

In a button (accessory)

After the label and trailing icon. The shortcut is not part of the button's name: add aria-keyshortcuts to the button when the shortcut works.

On other surfaces

The key takes its colors from the text around it, so it stays readable on gray panels and inside colored buttons.

On a gray panel: press ⌘K to search.

Edge cases

Right-to-left

The keys stay in their own order inside right-to-left text.

اضغط ⌘K للبحث، أو Ctrl Shift P للأوامر.

Narrow container

Lines break between keys, never inside one.

Use Ctrl Shift Alt Delete and then Ctrl Alt Backspace to reset.