Photon Design System

Kbd

A keyboard keycap for documenting a shortcut — ⌘K in a command menu, Esc in a dialog hint, ↵ to submit. Kbd is purely presentational: it renders a <kbd> and carries no interaction. To actually trigger a shortcut, wire a key handler on the target control.

Import

import { Kbd } from "@photon-ai/pho-ui/components/kbd";

Keys

Supply the key through children, or use the keys string convenience. Both render the same single cap.

⌘KEsc↵
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
<Kbd keys="Esc" />
<Kbd keys="↵" />

Chords

There’s no multi-key prop by design — a chord is just several caps in a row, which lets you place literal text between them.

Press ⌘K to search
<span className="inline-flex items-center gap-1">
  Press <Kbd>⌘</Kbd>
  <Kbd>K</Kbd> to search
</span>

Props

  • keys — string — convenience string for the key(s); ignored when children are given
  • children — ReactNode — the key content (takes precedence over keys)
  • className — string — merged onto the root <kbd>
  • …also accepts any native <kbd> attribute (aria-hidden, title, data-*)

Accessibility

  • Semantics — renders a native <kbd> element with no added ARIA role. Its text content is what a screen reader announces; no label wiring is required.
  • Redundant announcements — when the cap only echoes adjacent visible text (Press ⌘K to search), set aria-hidden on it so assistive tech doesn’t read the glyphs a second time. When the cap is the only mention of the key, leave it announced.

Keyboard: none — Kbd is presentational and not focusable, so it never enters the tab order and has no interaction of its own.

Best practices

  • Use Kbd to document a shortcut, not to invoke it — the actual binding lives on the control (a menu item, a global key handler), never on the cap.
  • When the keycap only echoes adjacent visible text (Press ⌘K to search), mark it aria-hidden so screen readers don’t announce the symbols twice.
  • Build chords from single caps in a row (⌘ K) rather than one wide cap, so each key stays legible and you can weave in words like “then”.
  • Prefer the platform glyphs your users expect (⌘, ⌥, ⇧, ↵) over spelled out names where space is tight.