Ask Claude CodeAsk Codex

Kbd

A key on the keyboard, such as Enter, or a shortcut, such as ⌘K: in instructions, in a list of shortcuts, or on a button that has one.

Installation

bun add @harmo-ui/css @harmo-ui/react

Usage

import { Button, Kbd } from "@harmo-ui/react";

<p>
  Press <Kbd>Enter</Kbd> to choose.
</p>

<Button aria-keyshortcuts="N">
  Create <Kbd aria-hidden="true">N</Kbd>
</Button>

Examples

This site is using your theme

In text

A key in an instruction, in 13px text that keeps the line's height. Screen readers read it as part of the sentence.

Press Enter to choose an option, or Esc to close the list.

<p>
  Press <Kbd>Enter</Kbd> to choose an option, or <Kbd>Esc</Kbd> to close
  the list.
</p>

Shortcuts

One .hkbd for keys pressed together, such as ⌘K; one each for keys used one after another, such as the arrows.

⌘K Search

↑ ↓ Move through the results

↵ Open the result

<>
  <p>
    <Kbd>⌘K</Kbd> Search
  </p>
  <p>
    <Kbd>↑</Kbd> <Kbd>↓</Kbd> Move through the results
  </p>
  <p>
    <Kbd>↵</Kbd> Open the result
  </p>
</>

On a button

Inside the label. On a filled button, the key is an outline in the label's color, so its text has the label's contrast. The shortcut goes in aria-keyshortcuts, and the key is hidden from screen readers, so the button is named “Create”. The app handles the key itself.

<>
  <Button aria-keyshortcuts="N">
    Create <Kbd aria-hidden="true">N</Kbd>
  </Button>
  <Button variant="secondary" aria-keyshortcuts="E">
    Export <Kbd aria-hidden="true">E</Kbd>
  </Button>
</>

API reference

React

<Kbd> renders the key, with its children as the text. Its props are the <kbd>'s attributes.

HTML

A <kbd class="hkbd"> with the key or shortcut as its text. Load kbd.css. It needs no script. One .hkbd holds one key, or one shortcut pressed together, such as ⌘K; keys used one after another, such as ↑ and ↓, each get their own.

It's 13px, medium weight, in the secondary text color, inline, with a line height of 1, so it flows with the text around it without changing the height of its lines. Inside the label of a filled Button, it's an outline in the label's color, so its text has the label's contrast.

See Kbd's full contract.

Accessibility

In text, the key is read as part of it: "Press Enter to choose". On a control, the key is a hint, not part of its name: put the shortcut in aria-keyshortcuts on the control, which screen readers announce as its shortcut, and hide the key with aria-hidden="true", so the button is named "Create", not "Create N". The app handles the key itself.

Screen readers read symbols such as ⌘ and ↵ differently, or not at all. In instructions, prefer words, such as "Enter", where a word fits.