Skip to content

Kbd

Show keyboard keys and shortcuts as keycaps.

import { Kbd, KbdGroup } from '@youj/react'

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use Kbd wherever you name a key: a shortcut beside a command, a hint in a footer, a step in the docs. It's the right element for keyboard input, not a styled code or span. Don't use it for arbitrary labels or counts. Those are Badges.

import { Kbd, KbdGroup } from '@youj/react'

export function Shortcut() {
  return (
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  )
}

A single key is a Kbd. A combination is a KbdGroup of Kbds, which is nested <kbd> elements, the way HTML spells keys pressed together. For a sequence, like G then S, put the word between the keys, as in the demo.

Reference

PropsOptions

Props

Kbd

Kbd adds no props of its own. They pass through to ComponentProps<'kbd'>.

KbdGroup

KbdGroup adds no props of its own. They pass through to ComponentProps<'kbd'>.

Reduced motionKbd is static

Reduced motion

Kbd is static. Nothing changes under reduced motion.

AccessibilityKeyboard, ARIA

Accessibility

  • Kbd renders <kbd>, HTML's element for keyboard input. It ignores the pointer, so it never steals a click from the control around it.
  • Symbols such as ⌘, ⌥ and ⇧ are read inconsistently. When the shortcut matters, write it out in the surrounding text, or give the icon inside a keycap an aria-label, as the arrow keys in the preview do.
  • Inside a button, the keycaps are a hint, not part of the button's name. Mark them aria-hidden. When the shortcut really works, expose it with aria-keyshortcuts on the button.