Kbd

PreviewCopy Anchor Link

UsageCopy Anchor Link

import { Kbd, KbdGroup } from '@vitnode/core/components/ui/kbd'

<Kbd>Esc</Kbd>

Kbd renders a real <kbd>, so browsers and assistive tech know it's a key.

ShortcutsCopy Anchor Link

KbdGroup wraps a combination. It's a <kbd> too, which is how HTML describes a key combo.

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Want a visible plus? Hide it from screen readers, since they already hear two keys:

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <span aria-hidden="true">+</span>
  <Kbd>C</Kbd>
</KbdGroup>

In buttons, tooltips and inputsCopy Anchor Link

Kbd sizes itself to fit small buttons. Inside a Tooltip it switches to a translucent style that stays readable in both themes. Next to an Input Group addon, it makes the classic "press ⌘ K to search" field. No props needed for any of them.

<Button size="sm" variant="outline">
  Accept
  <Kbd>Enter</Kbd>
</Button>

⌘ on Mac, Ctrl everywhere elseCopy Anchor Link

Detect the platform on the client, but render the same thing on the server and during hydration. useSyncExternalStore does both: its third argument is used for the server and hydration, then React switches to the real value.

const subscribeToNothing = () => () => {}

const useIsApple = () =>
  React.useSyncExternalStore(
    subscribeToNothing,
    () => /Mac|iPhone|iPad|iPod/.test(navigator.userAgent),
    () => true,
  )

const ModifierKey = () => (useIsApple() ? <Kbd>⌘</Kbd> : <Kbd>Ctrl</Kbd>)

AccessibilityCopy Anchor Link

• Keep the <kbd> element. A styled <span> doesn't say "this is a key".

• Screen readers announce ⌘ and ⇧ inconsistently. Pair each symbol with visually hidden text, since aria-label on a <kbd> isn't reliably read:

  Copy Text

  <Kbd title="Command">
    <span aria-hidden="true">⌘</span>
    <span className="sr-only">Command</span>
  </Kbd>

• Kbd is a hint, not a control (pointer-events-none, select-none). Put the action on a real button and listen for the key itself.

• Never make a shortcut the only way to do something.

PropsCopy Anchor Link

Both components accept every native <kbd> prop.

API ReferenceCopy Anchor Link

MDN - The Keyboard Input element