PixelKbd

Styled keyboard shortcut indicator that renders a native <kbd> element with surface-aware framing for inline docs, hints, and command menus.

  • Semantic <kbd> root so assistive tech announces the key role correctly.
  • Surface-aware: pixel chamfered border + pixel font, or linear pill.
  • Keycap depth per surface for a tactile feel: a thick bottom edge on pixel, a soft drop shadow on linear.
  • Composable inline — takes any inline content, such as icons or multi-character keys.
Status
stable
Category
data
Since
v1.0.0

API

import { PixelKbd } from '@pxlkit/ui-kit';
PropTypeDefaultDescription
children (required)React.ReactNode—Key label (e.g. "⌘", "K", "Esc").
surface'pixel' | 'linear'—Visual surface override.

Accessibility

WCAG target: 2.1 AA

  • kbd

Renders as a native <kbd> element so screen readers convey the keyboard-input semantic. PixelKbd is presentational (not focusable, not actionable) — pair it with descriptive prose (e.g. "Press <kbd>Ctrl</kbd> + <kbd>K</kbd> to open the command palette") so the shortcut is meaningful when read out of context. For key combos, render multiple PixelKbd siblings with a literal "+" separator marked aria-hidden.

Usage

import { PixelKbd } from '@pxlkit/ui-kit';

export function Default() {
  return <PixelKbd>Enter</PixelKbd>;
}

Examples

Default

import { PixelKbd } from '@pxlkit/ui-kit';

export function Default() {
  return <PixelKbd>Enter</PixelKbd>;
}

Common Keys

import { PixelKbd } from '@pxlkit/ui-kit';

export function CommonKeys() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <PixelKbd>Esc</PixelKbd>
      <PixelKbd>Tab</PixelKbd>
      <PixelKbd>Enter</PixelKbd>
      <PixelKbd>Space</PixelKbd>
      <PixelKbd>Shift</PixelKbd>
    </div>
  );
}

Combo (Ctrl + K)

import { PixelKbd } from '@pxlkit/ui-kit';

export function Combo() {
  return (
    <div className="flex items-center gap-1 text-xs">
      <PixelKbd>Ctrl</PixelKbd>
      <span aria-hidden>+</span>
      <PixelKbd>K</PixelKbd>
    </div>
  );
}

Surfaces

import { PixelKbd } from '@pxlkit/ui-kit';

export function Surfaces() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <PixelKbd surface="pixel">P</PixelKbd>
      <PixelKbd surface="linear">L</PixelKbd>
    </div>
  );
}

Inline in Prose

import { PixelKbd } from '@pxlkit/ui-kit';

export function InlineInProse() {
  return (
    <p className="text-sm text-retro-text">
      Press <PixelKbd>/</PixelKbd> to focus the search bar, then <PixelKbd>Esc</PixelKbd> to dismiss it.
    </p>
  );
}

Related