Kbd & Shortcut
A key on a keyboard, and a sequence of them.
Why it exists
A real <kbd> rather than a styled span: the element means “the user types this”, and that is the difference between a screen reader announcing a keyboard shortcut and announcing the letter K.
esc↵⌘K⇧?
mod knows which machine is asking
⌘ on a Mac, Ctrl everywhere else — and that decision can only be made in the browser, because the server does not know. It renders ⌘ first and corrects on hydration: a one-character swap inside a fixed-width cap, so nothing moves. This site's own search hint used to be a literal ⌘K, which lied to every Linux and Windows reader of the docs.
Press ⌘K anywhere on this site.
In both themes
light
⌘Kesc
dark
⌘Kesc
Guidance
Use it when
- A hint beside the control the shortcut triggers — that is where people look for it.
- Shortcut for anything with a modifier, so the spacing is the same everywhere.
- hidden sm:inline-flex on a hint, because a shortcut means nothing on touch.
Reach for something else when
- Prose about typing. <kbd> is for keys, not for quoting what someone entered — that is <code>.
- A shortcut the page does not actually implement. This is the most literal kind of documentation, and it is checkable.
- Kbd on the server for the mod key. Shortcut is a client component for exactly that reason.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| Kbd children | ReactNode | — | The key. One cap. |
| Shortcut keys | string[] | — | "mod" becomes ⌘ or Ctrl; every other string renders as given. |