Kbd

A keyboard key, drawn as a keycap.

Overview

A key or a shortcut the reader presses: Esc, ?, ⌘S.

Key

Do

Press Esc to close this list, or ⌘S to save.

import { Body, Kbd } from "@hackcove/ui";

<Body as="p">
  Press <Kbd>Esc</Kbd> to close this list, or <Kbd>⌘S</Kbd> to save.
</Body>
Kbd is a key the reader presses: in a sentence, or as the shortcut on a button.
Don't

Run bun install to install.

import { Body, Kbd } from "@hackcove/ui";

<Body as="p">
  Run <Kbd>bun install</Kbd> to install.
</Body>
A command is Code, not a key. Kbd draws a keycap, which says "press this".

Usage

  • Use Kbd for a key the reader presses, in a sentence or as the shortcut on a Button.
  • A command or a name is Code, never Kbd.

Accessibility

  • Kbd renders a <kbd> element, which marks the text as keyboard input.
  • Its border takes the colour of the text around it, so it reads on plain text and on a filled button.

API

Kbd

A keyboard key. Its border takes the surrounding text colour, so it reads on a filled button and on plain text.