Skip to content
Try free

Kbd

One keyboard key, in running text or menus.

  • Free core, MIT
  • Version 2.0.0-rc.1
  • APG pattern: kbd element

Examples

These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.

Default

K
Show the code

Default, code

<Kbd>K</Kbd>

Chord

Press Ctrl + K to search.

Show the code

Chord, code

<p className="text-body-md text-fg">Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to search.</p>

Tokens

The 5 design tokens Kbd reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 5 tokens
Tokens Kbd reads
TokenValue nowCSS variable
color.bg.raised…--sd-color-bg-raised
color.border.default…--sd-color-border-default
color.text.default…--sd-color-text-default
font.family.sans…--sd-font-family-sans
radius.sm…--sd-radius-sm

Install

The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).

Install

npm i @superduperui/react @superduperui/tokens

Import

import { Kbd } from "@superduperui/react"

Props

Kbd also takes the props of the React Aria component it’s built on.

Kbd props
PropTypeWhat it does
childrenrequiredstringThe key as printed on the keyboard: "Ctrl", "Enter", "K". Combine several Kbd for chords.

When to use it

Use it for

  • Shortcuts in help text and menus
  • Keyboard instructions

Use something else for

  • Buttons that look like keys: use Button

Accessibility

Screen readers announce Read as its text ("Ctrl").

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.3.2.

Not interactive: density changes spacing only.

This release’s test results

Test results for Kbd in this release
axe-core (WCAG A, AA, AAA and best practice)60 runs across every story, theme, density and width: 0 violations
Rendered text contrast180 text runs: 0 below 7:1, lowest 10.58:1
Target size0 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)0 focus stops in 0 browser engines: all pass

Manual passes with VoiceOver and NVDA haven’t been done yet.

In Figma

The Figma component is Kbd. The Figma library isn’t published yet.

Figma to code: Key → children.