Kbd

One keyboard key, for shortcut hints in menus, tooltips and help text.

PrimitivesServer-rendered

Examples

One key per Kbd. Put the keys of a chord side by side.

Light

⌘K

Esc/

Dark

⌘K

Esc/

Example

Wrap

<Inline gap="1"><Kbd>⌘</Kbd><Kbd>K</Kbd></Inline>
<Kbd>Esc</Kbd>
<Kbd>/</Kbd>

Light

Press ⌘ K to search servers, skills and settings.

Dark

Press ⌘ K to search servers, skills and settings.

Example

Wrap

<Text size="sm" tone="ink-2">
  Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to search servers, skills and settings.
</Text>

Wrap

import { Kbd } from '@switchboard/ui'

<Kbd>⌘</Kbd><Kbd>K</Kbd>

Every component also takes mix, for css() and mixins applied after its own style.

Kbd props
Prop	Type	Default	Description
children	RemixNode	–	The key: a symbol (⌘, ⇧) or a short name (Esc, Enter).
mix	Mix	–	Extra css() or mixins, applied after the key style.

Also accepts every <kbd> attribute.

Renders a native <kbd>, which screen readers read as its text.
Symbols such as ⌘ are read inconsistently; where the shortcut matters, also write the name ("Command K").