Data display
Kbd
Kbd shows keyboard keys the way people see them on their keyboard: a small keycap with a firmer bottom edge. KbdCombo strings keys into chords like ⌘ K or Ctrl + K and sequences like G then I. Symbol keys get a spoken name, so a screen reader says "Command" instead of reading out a glyph.
Keyboard shortcuts
- Search everything
- CommandK
- New invoice
- C
- Go to inbox
- GthenI
- Save draft
- CommandS
- Toggle sidebar
- CommandShiftB
- Close panel
- Esc
const shortcuts = [ { action: "Search everything", keys: ["⌘", "K"] }, { action: "New invoice", keys: ["C"] }, { action: "Go to inbox", keys: ["G", "I"], separator: "then" }, { action: "Save draft", keys: ["⌘", "S"] }, { action: "Toggle sidebar", keys: ["⌘", "⇧", "B"] }, { action: "Close panel", keys: ["Esc"] },]; <dl className="flex flex-col"> {shortcuts.map((s) => ( <div key={s.action} className="flex items-center justify-between gap-4 rounded-ui px-3 py-2 hover:bg-raised"> <dt className="text-[13px] text-fg">{s.action}</dt> <dd className="m-0"> <KbdCombo keys={s.keys} separator={s.separator} /> </dd> </div> ))}</dl>Usage
components/ui/kbd.tsx
import { Kbd, KbdCombo } from "@/components/ui/kbd"; <KbdCombo keys={["⌘", "K"]} /><Kbd>Esc</Kbd>Examples
Overview
Keyboard shortcuts
- Search everything
- CommandK
- New invoice
- C
- Go to inbox
- GthenI
- Save draft
- CommandS
- Toggle sidebar
- CommandShiftB
- Close panel
- Esc
const shortcuts = [ { action: "Search everything", keys: ["⌘", "K"] }, { action: "New invoice", keys: ["C"] }, { action: "Go to inbox", keys: ["G", "I"], separator: "then" }, { action: "Save draft", keys: ["⌘", "S"] }, { action: "Toggle sidebar", keys: ["⌘", "⇧", "B"] }, { action: "Close panel", keys: ["Esc"] },]; <dl className="flex flex-col"> {shortcuts.map((s) => ( <div key={s.action} className="flex items-center justify-between gap-4 rounded-ui px-3 py-2 hover:bg-raised"> <dt className="text-[13px] text-fg">{s.action}</dt> <dd className="m-0"> <KbdCombo keys={s.keys} separator={s.separator} /> </dd> </div> ))}</dl>Keys and sizes
sm (20 px) for inline text and menus, md (24 px) for help pages and onboarding. Symbol keys carry a spoken name and a tooltip.
CommandShiftOptionControlEnterBackspaceEscTabK
CommandUp arrowDown arrowSpaceEnter
<Kbd>⌘</Kbd><Kbd>⇧</Kbd><Kbd>⌥</Kbd><Kbd>⌃</Kbd><Kbd>↵</Kbd><Kbd>⌫</Kbd><Kbd>Esc</Kbd><Kbd>Tab</Kbd><Kbd>K</Kbd> <Kbd size="md">⌘</Kbd><Kbd size="md">↑</Kbd><Kbd size="md">↓</Kbd><Kbd size="md">Space</Kbd><Kbd size="md">Enter</Kbd>Combinations
Chords sit side by side (Mac style) or with a plus (Windows style). Sequences say "then" between keys.
CommandKCtrl+KCommandShiftPGthenICommandEnter
<KbdCombo keys={["⌘", "K"]} /><KbdCombo keys={["Ctrl", "K"]} separator="plus" /><KbdCombo keys={["⌘", "⇧", "P"]} /><KbdCombo keys={["G", "I"]} separator="then" /><KbdCombo keys={["⌘", "Enter"]} size="md" />Inline and in a field
Keys sit on the text baseline, so they work mid-sentence and as a hint inside a search trigger.
Press CommandK to search, or / to filter this list. Use Up arrow Down arrow to move and Enter to open.
Search invoices…CommandK
<p> Press <KbdCombo keys={["⌘", "K"]} /> to search, or <Kbd>/</Kbd> to filter this list. Use <Kbd>↑</Kbd> <Kbd>↓</Kbd> to move and <Kbd>↵</Kbd> to open.</p><div className="flex h-9 items-center gap-2 rounded-ui border border-line-strong bg-surface px-3 text-[13px] text-subtle"> <Search aria-hidden="true" strokeWidth={1.75} className="size-4" /> <span className="flex-1">Search invoices…</span> <KbdCombo keys={["⌘", "K"]} /></div>Props
Kbd
PropTypeDefaultDescription
childrenrequiredReactNodedefault: —Key label: a letter, a word (Esc, Tab) or a symbol (⌘ ⇧ ⌥ ⌃ ↵ ⌫ ↑ ↓).size"sm" | "md"default: "sm"20 or 24 px tall.classNamestringdefault: —Extra classes, such as margins.
KbdCombo
PropTypeDefaultDescription
keysrequiredstring[]default: —Keys in order.separator"none" | "plus" | "then"default: "none"Chord side by side, chord with +, or a sequence.size"sm" | "md"default: "sm"Size of every key.
Accessibility
- Keys render as kbd elements; a combination is a kbd wrapping one kbd per key, as the HTML spec describes for key input.
- Symbol keys (⌘ ⇧ ⌥ ⌃ ↵ ⌫ ⇥ and arrows) are read by name ("Command", "Shift"), with the glyph hidden from screen readers and the name in a tooltip.
- Kbd is not interactive. If a shortcut also has a button, the button is the accessible way to trigger it; show the shortcut as a hint.
- Show the modifier for the user's platform (⌘ on macOS, Ctrl elsewhere) when you know it.