V2 componentsUpdated Oct 15, 2026
Kbd
A hotkey as keycap chips, from a string like "cmd+k". Named keys become glyphs (⌘ ⇧ ⌥ ⌃ ↩ ⎋ ⇥ ⌫). The one hotkey rendering in the system: Button's hotkey prop and Tooltip.Hotkey are both Kbd, so a shortcut looks the same wherever it appears. Use it inline in copy too.
Source: packages/ui/src/components/kbd
import { Kbd } from '@highlight/ui'⌘K⌘⇧↩⎋
import { Kbd } from '@highlight/ui' export default function KbdBasic() { return ( <div className="flex flex-wrap items-center justify-center gap-4"> <Kbd hotkey="cmd+k" /> <Kbd hotkey="cmd+shift+enter" /> <Kbd hotkey="esc" /> </div> )}Button fits the chips to its own height and corner; Tooltip.Hotkey is Kbd at its default size.
Press ⌘⇧H to open Highlight
import { Button, Kbd, Tooltip } from '@highlight/ui'import { Search } from 'lucide-react' export default function KbdInContext() { return ( <div className="flex flex-wrap items-center justify-center gap-4"> <Button hotkey="cmd+enter">Send</Button> <Tooltip> <Tooltip.Trigger render={ <Button aria-label="Search" shape="square" variant="ghost"> <Search /> </Button> } /> <Tooltip.Content> Search <Tooltip.Hotkey hotkey="cmd+k" /> </Tooltip.Content> </Tooltip> <p className="text-foreground-secondary flex items-center gap-1.5 text-sm"> Press <Kbd hotkey="cmd+shift+h" /> to open Highlight </p> </div> )}The root, then any compound sub-components. Every part accepts className and forwards the rest of its props to the element or Base UI part beneath it.
Kbd- A <kbd> holding one chip per key. Size and colour come from --kbd-h, --kbd-gap, --kbd-bg and --kbd-ink; type size from the wrapper text-*.
Props added on top of the underlying element or Base UI part.
| Prop | Type | Default | Description |
|---|---|---|---|
hotkey | string | — | Keys joined by "+", e.g. "cmd+shift+k". |
className | string | — | Set --kbd-* properties or text-* here to fit a host. |