Kbd

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

Usage

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

export function CommandMenuShortcut() {
  return (
    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  )
}

Kbd renders one key as a <kbd> element. KbdGroup lines up the keys of a combination with a 4px gap; render one Kbd per key and no “+” between them.

Write key names as they appear on the keyboard: Ctrl, Shift, Enter, Esc, single letters in uppercase. On a page that detects macOS, show ⌘ and ⌥ instead of Ctrl and Alt. For a shortcut inside a Dropdown Menu item, use DropdownMenuShortcut, which aligns it to the end of the row.

Examples

In text

Kbd is an inline element 20px tall, so it fits inside a line of help text or an empty state.

<p className="text-sm text-text-secondary">
  Press <Kbd>/</Kbd> to search alerts, or{" "}
  <KbdGroup>
    <Kbd>Shift</Kbd>
    <Kbd>?</Kbd>
  </KbdGroup>{" "}
  to list every shortcut.
</p>

With icons

An icon inside Kbd is sized to 12px. Add the key name as visually hidden text: an icon alone gives screen readers nothing to read.

<p className="flex items-center gap-1.5 text-sm text-text-secondary">
  <KbdGroup>
    <Kbd>
      <ArrowUpIcon />
      <span className="sr-only">Up arrow</span>
    </Kbd>
    <Kbd>
      <ArrowDownIcon />
      <span className="sr-only">Down arrow</span>
    </Kbd>
  </KbdGroup>
  to move between alerts, <Kbd>Enter</Kbd> to open one
</p>

In a tooltip

Inside TooltipContent, Kbd switches to colors that read on the inverted tooltip background. Put the action name first, then the shortcut.

<Tooltip>
  <TooltipTrigger render={<Button variant="outline" />}>
    Acknowledge
  </TooltipTrigger>
  <TooltipContent>
    Acknowledge alert <Kbd>A</Kbd>
  </TooltipContent>
</Tooltip>

In an input

A hint for the shortcut that focuses a search field, placed in an end InputGroupAddon.

<InputGroup className="max-w-xs">
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
  <InputGroupInput aria-label="Search assets" placeholder="Search assets" />
  <InputGroupAddon align="inline-end">
    <Kbd>/</Kbd>
  </InputGroupAddon>
</InputGroup>

Accessibility

• Kbd only displays a shortcut; registering the key handler is up to the app. Do not make a shortcut the only way to reach an action.
• Screen readers read the text inside <kbd> as written. Symbols such as ⌘ are read inconsistently, so prefer words, or add the name in a sr-only span.
• Kbd ignores pointer events and cannot be selected, so it never takes a click meant for the button or input around it.

API reference

Generated from the TypeScript source. className, style and children are accepted everywhere and omitted below.