Kbd

atoms

Keyboard key indicator — 20×20 with monospace font, 1px border, 4px radius. Used in shortcuts hints.

ARIA Role: presentation (decorative)

Demo

Demo for Kbd (atoms)

Keyboard key indicator — 20×20 with monospace font, 1px border, 4px radius. Used in shortcuts hints.

Props

PropTypeRequiredDefaultDescription
childrenReact.ReactNodeYes—Key label: '⌘', 'Shift', 'K', 'Enter'

TypeScript Interface

interface KbdProps {
  children: React.ReactNode;
  size?: 'sm' | 'md';
}

Assertions (NASA Rule 5)

  • [render]Children must be a single key label, no nesting(NASA Rule 6)
  • [aria]Decorative wrapper — parent provides context(WCAG 1.1.1)

Usage

Import

import { Kbd } from '@epasslive/design-system'

Basic

<Kbd />

With Variants

<Kbd variant="primary" size="md" />