Kbd

Measured from Attio — 18px height, r5 radius, 11px weight-500 label, inset 1px border.

Installation

bun add crisp

import "crisp/styles.css";
import { Kbd } from "crisp";

Usage

import { Kbd } from "crisp";

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

Props

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Renders the passed child element instead of a `<span>`.
`...props`	`ComponentPropsWithoutRef<"span">`	—	All native `<span>` attributes (`className`, `id`, etc).

Examples

Single key

Esc

<Kbd>Esc</Kbd>

Shortcut combos

Render one Kbd per key — this is how Command shows each item's shortcut hint.

<Kbd>G</Kbd>
<Kbd>H</Kbd>

Inline with text

Kbd sits on the text baseline, so it reads naturally inside a sentence or next to a label.

Press ⌘K to open the command palette.

<p>
  Press <Kbd>⌘K</Kbd> to open the command palette.
</p>

Kbd renders a plain <span>, not the semantic <kbd> element, since it's used as a visual hint rather than a literal transcript of a key the user pressed — the same choice Attio's own UI makes. It carries no implicit ARIA role and is not focusable. When a Kbd is the only clue that a shortcut exists (e.g. floating next to a search field with no other label), give the surrounding control an aria-label or visible text that states the shortcut, since screen readers won't announce a bare ⌘K glyph meaningfully.

Preview