Kbd

Keyboard shortcut indicator badge.
iOS
Android
Web
tsx
<Kbd keys="⌘ K" />

Props

Prop
Description
children
ReactNode
A single key label, rendered as one cap. Ignored when `keys` is set.
keys
string | string[]
A multi-key shortcut, rendered as one cap per key with a separator between them. 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
Render a key SEQUENCE (press one, then the next), separating caps with a gap instead of the default `+` combo joiner. Only affects the `keys` form.
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.

Do & Don’t

Single

Don’t
⌘K
Packing a whole shortcut into one key cap reads as a single keystroke that does not exist.
Do
Esc
Use children for one real key; give each cap exactly one key.

Combo

Don’t
⌘
+
⇧
+
P
Hand-assembling caps and separators is verbose and drops the combined accessible name; let keys compose the chord.
Do
Pass every key to keys; Kbd lays out the caps with + separators and reads as one shortcut to a screen reader.

In a sentence

Don’t
Press Ctrl+K to search.
Plain-text shortcuts blend into the prose and are easy to miss.
Do
Press
to search.
Drop a keys Kbd inline so the shortcut reads as physical keys.
← InputOTP
Listbox →