Skip to content

Kbd

A keyboard key or shortcut, shown as a small keycap.

alphaSource
⌘KCtrl+Shift+PEsc↵

Installation

pnpm add @syntara/react @syntara/tokens
import { Kbd, KbdGroup } from '@syntara/react';

Usage

import { Kbd, KbdGroup } from '@syntara/react';

export function SearchHint() {
  return (
    <p>
      Press{' '}
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>{' '}
      to search.
    </p>
  );
}

Examples

In text

Shortcut hints inside a sentence.

Press / to search claims, or ⌘K to open the command menu.

Use ↑ ↓ to move between rows and Space to select.

Accessibility

No keyboard interaction of its own.

  • Renders <kbd>; KbdGroup is a <kbd> containing <kbd>s, the HTML idiom for a key combination.
  • Symbols such as ⌘ and ↵ are read inconsistently by screen readers; spell the shortcut out nearby or in an aria-label on the control it belongs to (aria-keyshortcuts).
  • Key combinations stay in pressing order (left to right) on right-to-left pages.

Guidelines

Do

  • Use the platform's key names (⌘ on macOS, Ctrl elsewhere).

Don’t

  • Don't use Kbd for code or values — use <code>.

API reference

Kbd

childrenRequired
ReactNode

The key name or symbol, e.g. "Esc", "⌘", "↵".

KbdGroup

childrenRequired
ReactNode

Kbd elements, optionally with separators such as "+" or "then".

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour4
border.defaultsurface.raisedtext.defaulttext.subtle
Type4
font.monofont.size.xsfont.weight.mediumfont.tracking.xs
Space and size2
space.1space.5
Shape1
radius.badge
Depth2
shadow.highlighthairline