Skip to content
Site volume
Colourway

Components

Kbd

A key cap for shortcuts and key names, in the text face with a small hard offset.

  • Experimental
  • Reading layer
  • Server component
  • Since 0.9.0
  • Press check
Import from@maxgrits/overprint-react/kbd
On this page

Kbd prints a key the way a keyboard does: the text face at 14 px and weight 650 (never mono), a 2 px ink rule and a 2 px hard offset, the hit key in miniature. Pass keys for a combination; each key gets its own cap and the caps are joined by a plus sign.

Example#

Look of this example

Press CtrlK or / to search, and Escape to close.

Live render of examples/kbd/basic.tsx

Usage#

Use Kbd to name keys in instructions and menus: "Press / to search", the shortcut beside a menu item. It prints the text face (never mono) on a small key with a hard offset, the hit key in miniature.

  • Combinations. keys={["Ctrl", "K"]} prints a cap per key joined by plus signs.
  • Platforms. Write the key people will see; when it differs, name both: "Ctrl or ⌘".

Anatomy#

Press CtrlK or / to search, and Escape to close.

The parts of examples/kbd/basic.tsx, numbered:
  1. Keydata-mk-part="key"
  2. PlusJoins the keys of a combination..mk-kbd-plus

Volume#

Reading layer: identical at every volume.

  • Quiet

    Press CtrlK or / to search, and Escape to close.

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    Press CtrlK or / to search, and Escape to close.

    The site default. Art on its own plates, one display moment per view.

  • Press

    Press CtrlK or / to search, and Escape to close.

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Press CtrlK or / to search, and Escape to close.

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • Use the key's printed name: "Enter", "Escape", "Tab"; single characters as they look: "/".

Do and don't#

Do

Press / to search.

The key, as printed.

Don't

Press the slash key on your keyboard to search.

A sentence inside a key cap.

A cap stands for one key. Description belongs in the sentence around it.

Accessibility#

  • A combination is nested <kbd> elements (HTML's own pattern), so screen readers read each key; the plus signs are hidden.
  • Key names are words where words exist ("Escape", "Page Down"); symbols such as ⌘ sit beside a word in the text around them.

The colour pairs it prints, with their contrast on both papers:

TextSurfaceRoleBoneNight
--mk-on-slab--mk-slablabel 16.49:1 · Lc 98.7, passes 16.21:1 · Lc 95.1, passes
--mk-on-slab--mk-slabbody-ui 16.49:1 · Lc 98.7, passes 16.21:1 · Lc 95.1, passes
--mk-on-slab--mk-slablong 16.49:1 · Lc 98.7, passes 16.21:1 · Lc 95.1, passes
--mk-code-text--mk-code-surfacecode 18.42:1 · Lc 105.1, passes 15.02:1 · Lc 95.4, passes
--mk-code-keyword--mk-code-surfacecode 7.17:1 · Lc 82.5, passes 12.45:1 · Lc 82.7, passes
--mk-code-string--mk-code-surfacecode 6.72:1 · Lc 82.6, passes 12.40:1 · Lc 83.0, passes
--mk-code-number--mk-code-surfacecode 6.82:1 · Lc 82.6, passes 12.40:1 · Lc 82.5, passes
--mk-code-function--mk-code-surfacecode 6.75:1 · Lc 82.7, passes 12.42:1 · Lc 82.7, passes
--mk-code-comment--mk-code-surfacecode 6.60:1 · Lc 82.7, passes 12.47:1 · Lc 82.8, passes
--mk-code-punctuation--mk-code-surfacecode 8.06:1 · Lc 87.9, passes 15.02:1 · Lc 95.4, passes

Process at Studio, normal contrast. Every look: the press check.

Props#

PropTypeDefaultDescription
childrenReactNodenoneOne key's name or symbol (e.g. "Escape", "⌘").
keysreadonly string[]noneA combination, printed as one cap per key joined by "+" (e.g. `["Ctrl", "K"]`).

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from KbdProps in packages/overprint-react/src/reading/kbd/kbd.tsx.

Tokens#

System tokens (6)

Its own properties (3)

  • --mk-kbd-leading
  • --mk-kbd-offset
  • --mk-kbd-pad

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

  • MinorreactCombobox and ComboboxItem (a case- and accent-insensitive filter by default, groups, chips for multiple, "Searching…", an empty message, a live result count, and inline for a list printed in place), Popover with PopoverTrigger, PopoverContent and PopoverClose, Menu with its eleven parts (shortcuts as Kbd caps, checkbox and radio items, group labels, separators, submenus), and ToastProvider with useToast (a slab pill, one at a time with three waiting, 5.2 s with a drain bar that holds while the region is hovered, focused or the window is away). Breadcrumbs, Pagination (with paginationRange), Count, ProgressBar (bar, segments, indeterminate), Avatar and AvatarGroup, Tick, EmptyState, Kbd, Skeleton and Loader. Read the whole entry