i

Keyboard key

Content · researched

Shows a key or shortcut so a person can learn the keyboard route to an action.

atom

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Typography.Text keyboard prop subset native: yes antd 6.6.5
Variants
—
Sizes
—
States documented
—
Accessibility guidance
no

Index said not shipped. Typography.Text has a keyboard boolean prop that wraps the text in a native kbd element. A prop of Text, not a standalone component.

docs ↗ · code ↗

Carbon

absentCarbon does not ship this component. Nothing is drawn in its place.

Checked docs components list and source; no kbd element or key component. Keyboard shortcuts are covered only as guidelines pages.

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked: component index (https://design-system.service.gov.uk/components/ , 37 components), patterns index, styles index, repo tree src/govuk/components and objects, and installed govuk-frontend 6.5.1 components directory. No keyboard-key component.

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (20 component pages), the repo top-level dirs, labs/, labs/gb/components and the installed 2.5.0 package. No kbd element.

Primer

KeybindingHint native: yes @primer/react 38.40.1
Variants
normal, onEmphasis, onPrimary
Sizes
small, normal
States documented
—
Accessibility guidance
no

Primer React. Renders kbd elements for key glyphs; page status draft (index said experimental). No accessibility page on primer.style.

1 corrected on re-read
  • variants: ["normal","onEmphasis"] → ["normal","onEmphasis","onPrimary"] Docs Variant section lists normal, onEmphasis, onPrimary (props table omits onPrimary); formats condensed|full

docs ↗ · code ↗

Spectrum

Keyboard native: yes
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
—
States documented
—
Accessibility guidance
no

Implementations: S2 and v3 Keyboard, built on React Aria Keyboard, which renders a native kbd element. No SWC or spectrum-css counterpart, no spectrum.adobe.com page; docs page not read. Not in installed SWC 1.12.4.

2 corrected on re-read
  • a11y_documented: "unread" → "no" v3 Keyboard page headings: Example, Content, Props; no accessibility section
  • urls: {"docs_url":"https://react-spectrum.adobe.com/react-spectrum/Keyboard.html","code_url":"https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/s2/exports/Keyboard.ts"} → {"docs_url":"https://react-spectrum.adobe.com/v3/Keyboard.html","code_url":"https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/s2/exports/Keyboard.ts"} HTTP 200; changed: docs_url

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

Checked the docs component index and status page and the develop packages/ tree (88 entries, matching installed 3.14.0): no keyboard key component.

Platform facts

Native elementkbdSpec: kbd 'represents user input (typically keyboard input)'; nested kbd 'represents an actual key or other single unit of input'. MDN: default monospace font.
Baseline—
APG patternnone
ARIA role—
Shipped by3 of 7 systems

Anatomy

  1. key (nested kbd) — Spec: nested kbd 'represents an actual key or other single unit of input'.
  2. key combination (outer kbd) optional — Spec example: <kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd>; the '+' is plain text between keys.

The seven states

default Static text.
hover n/a — Not interactive.
focus n/a — Not focusable by default.
active n/a — Not interactive.
disabled n/a — Not defined by APG or HTML.
error n/a — Not defined by APG or HTML.
loading n/a — Not defined by APG or HTML.

Every cell was read twice, the second time from raw sources by a separate pass. 3 of 35 fields changed on the second read — open any “corrected” note to see what it said before.