Kbd

⌘ Shift Esc

Show code

Usage

<kbd class="kbd">⌘</kbd>

<kbd> is the element for keyboard input, so the meaning lives in the markup rather than the class.

Group

⌘ K Ctrl Shift P

Show code

A chord is several keys, so it is several <kbd> elements inside a .kbd-group — not one element with a plus sign inside it.

In a button

Search ⌘K

Show code

Where the keys go

Anywhere a shortcut is shown, the keys are .kbd elements rather than bare glyphs — a dropdown menu shortcut, a tooltip, an input group addon. Each surface styles them to fit; the markup is the same everywhere.

RTL

Set dir="rtl" on the page or on any subtree — padding, corners and positions follow the reading direction on their own. See the button page for a live example.

Accessibility

.kbd sets pointer-events: none, so a key hint never swallows the click of the control it sits in.

A symbol on its own is not readable: ”⌘” is announced inconsistently across screen readers. When the shortcut matters, spell it out:

<kbd class="kbd" aria-label="Command">⌘</kbd>

And a hint is only a hint — it does not register anything. The shortcut still has to be bound in your own code.