Skip to content

Kbd

A key or shortcut, shown inline. Not interactive.

Sourcecomponents/kbd.tsx

Keys

EscEnterTab⌘⇧⌥

Combinations

⌘K⌘⇧PCtrlEnter

In a sentence

Press ShiftEnter for a new line, or Esc to cancel.

Next to a command

  • New brief⌘N
  • Duplicate⌘D
  • Archive⌘E

Usage

Kbd usage
import { Kbd, KbdGroup } from "@/components/kbd";
export function KbdUsage() {  return (    <p>      Press{" "}      <KbdGroup>        <Kbd>⌘</Kbd>        <Kbd>K</Kbd>      </KbdGroup>{" "}      to search, or <Kbd>Esc</Kbd> to close.    </p>  );}

When to use

Use when

Showing a key or shortcut in text: ⌘ K, Esc

Don’t use when

Anything clickable