Kbd

Atom
Keyboard shortcut indicator: a raised 24 px key cap with a mono label. keys composes a whole shortcut, one cap per key; sequence says "then" between the caps of keys pressed one after another. A shortcut reads as one accessible name ("⌘+K", "G then C"). comfortable pads the cap 3 px above and below its label and 8 px at the sides (25 px tall) for a key set beside what it does, as a reference's keyboard table lists it; omit it for the 24 px cap with 6 px sides.
src/atoms/kbd
View in Controls

Playground

Every control sets a real prop of KbdProps. The JSX below updates as you go.
Props
keys
string
sequence
boolean
JSX · KbdProps
<Kbd keys="⌘ K" />

Variants

4 examples from src/atoms/kbd/kbd.md, each rendered live from its own JSX.
Esc
Single
<Kbd>Esc</Kbd>
Sequence
<Kbd keys="G C" sequence />
In a button
<Button outline iconRight={<Kbd keys="⌘ K" />}>Search…</Button>
Press
to search.
In a sentence
<Row alignCenter tight>
<Typography small>Press </Typography>
<Kbd keys="⌘ K" />
<Typography small> to search.</Typography>
</Row>

Anatomy

1
Keycap
2
Glyph
3
Separator
Dimmed parts appear only in some states or variants.

Props

9 props on KbdProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
9 props
children
ReactNode
–
A single key label, rendered as one cap. Ignored when keys is set.
keys
string | string[]
–
A multi-key shortcut (a combo, pressed together), rendered as one cap per key. Pass a whitespace-separated string ("⌘ K") or an array (["⌘", "K"]). A single entry renders one cap, identical to passing that key as children. When set, keys takes precedence over children.
sequence
boolean
false
Render a key SEQUENCE (press one, then the next): the caps are separated by "then". Only affects the keys form.
comfortable
boolean
false
The comfortable cap: padded 3 px above and below its label and 8 px at the sides (25 px tall), the key the hand-off's component page sets beside a key's effect. Omit for the 24 px cap with 6 px sides.
small
boolean
false
The compact 22 px cap: 6 px sides on the small key corner, a 500 11 px label on a 20 px line (the hint a search field or a command palette shows, <Kbd small flat>). Size precedence: small > tiny; a size step wins over comfortable.
tiny
boolean
false
The compact 20 px cap: 5 px sides on the tiny key corner, a 500 10 px label on an 18 px line.
flat
boolean
false
The hint cap's edge: one pixel all round (no raised 2 px bottom) and the label in the secondary ink, the keycap a field or a menu shows beside what it opens.
testID
string
–
E2E hook forwarded to the root element.
style
LayoutStyle
–
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Accessibility and keyboard

Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
Roles
image
img
ARIA on web
aria-hidden
aria-label
From the docs
Keyboard shortcut indicator: a raised 24 px key cap with a mono label. keys composes a whole shortcut, one cap per key; sequence says "then" between the caps of keys pressed one after another. A shortcut reads as one accessible name ("⌘+K", "G then C"). comfortable pads the cap 3 px above and below its label and 8 px at the sides (25 px tall) for a key set beside what it does, as a reference's keyboard table lists it; omit it for the 24 px cap with 6 px sides.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Press
to search.
Web
control 10 · field 10 · card 16 · Instrument Sans
Press
to search.
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Press
to search.
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Kbd keys="⌘ K" />

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--fm
--ft
--ln2
--sf3
--tx

Related components