Skip to content

Kbd

Proposed

A keyboard key. For shortcut hints in menus, inputs and tooltips. Mono, because it is a literal.

@varick/ui/components/kbdAdded 2 Sept 2026

K

Usage

import { Kbd, KbdGroup } from "@varick/ui/components/kbd";

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

Variants

A group

⌘K
<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>

In a sentence

Press ? for shortcuts

Press <Kbd>?</Kbd> for shortcuts

API reference

Every component also accepts className and the native props of its root element.

PropTypeDefaultDescription
childrenReactNoderequiredOne key per Kbd. Group them with KbdGroup.

Accessibility

  • A Kbd is a hint, not a control: pointer-events are off and it cannot take focus.

Styles

Proposed CSS in Varick tokens. Nothing in the app renders this yet.

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 20px;
  padding: 0 4px;
  border: 1px solid var(--hairline-soft);
  border-radius: 4px;
  background: var(--fill);
  font-family: 'Menlo', monospace;
  font-size: 11px;
  color: var(--fg-mid);
  pointer-events: none;
  user-select: none;
}