Miltinson.Design system
GitHub

Kbd

Styled kbd element for keyboard-shortcut hints.

atomsSource
import { Kbd } from '@elirobinson/react/components/atoms/Kbd';

Styles: @elirobinson/react/styles/atoms/Kbd.css — already included when you import @elirobinson/react/styles.css.

Press Esc to close the dialog.

Show code
import { Kbd } from '@elirobinson/react/components/atoms/Kbd';

export default function Basic() {
  return (
    <p>
      Press <Kbd>Esc</Kbd> to close the dialog.
    </p>
  );
}

When to use it

Use Kbd to label an actual physical key or shortcut inline — in help text, empty states, or next to a CommandPalette trigger. It's typographic, not interactive: it doesn't respond to clicks and doesn't listen for the key it names.

Shortcut combos

Kbd renders one key at a time — space or join multiple Kbd elements yourself for a combo.

Open the command palette⌘K
Show code
import { Kbd } from '@elirobinson/react/components/atoms/Kbd';

export default function Combo() {
  return (
    <div className="demo-row">
      <span>Open the command palette</span>
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </div>
  );
}

Props

No props of its own beyond the inherited HTML attributes.

Also accepts all HTMLAttributes<HTMLElement> props.

Accessibility

  • Renders a native <kbd> element — the correct semantic tag for "user input, such as a keyboard key," with no extra ARIA required.
  • Purely presentational otherwise: not focusable, no keyboard handling of its own.

Do

  • Use Kbd to label an actual physical key or shortcut ("⌘K", "Esc", "Enter").
  • Pair it with CommandPalette hints or empty-state copy ("Press ⌘K to search").
  • Separate multi-key combos with your own spacer or "+" — Kbd renders one key at a time.

Don't

  • Make Kbd clickable — it’s typographic, not a control; use Button if it needs to do something.
  • Use it for arbitrary code snippets — that’s an inline code block, not a keyboard hint.
  • Write full words that aren’t keys inside Kbd — it reads oddly for anything but a key name.