Officina UI
Components

Kbd

Styled keyboard key badge that renders a single key cap.

Kbd renders a styled <kbd> element for a single keyboard key, like Cmd or K. It passes through all native <kbd> props, so compose several inline to show a combo. For platform-aware combos that map mod to ⌘/Ctrl automatically, use Shortcut, which is built on Kbd.

Example

Preview
Open command menu with Cmd K
import { Kbd } from '@officina/ui';

function Hint() {
  return (
    <span>
      Open search with <Kbd>Cmd</Kbd> <Kbd>K</Kbd>
    </span>
  );
}

API

Kbd adds no props of its own. It forwards all standard <kbd> attributes (plus ref and className) to the underlying element.

On this page