Pesto UI

Kbd

A keycap for shortcuts in menus, tooltips and empty states. KbdGroup joins caps into a combination.

tsx
import { Kbd, KbdGroup } from "@pestoui/core"

Variants

inverse is tuned for the dark promo surface, so it needs one under it.

KK
Command paletteK

Sizes

Minimum width matches the height, so a single character reads square.

EscSEscSEscS

Combinations

The separator stays in the accessible name — “Ctrl + K” and “G then H” are meaningful.

+KCtrl+Shift+PGthenH

Props

PropTypeDefaultDescription
variant"default" | "muted" | "inverse""default"Surface treatment. inverse is for the dark promo surface.
size"sm" | "default" | "lg""default"Keycap height, with a matching minimum width.
childrenReactNode—The key label — text or a small icon, which is sized to 12px automatically.
separatorReactNode"+"KbdGroup only — rendered between each key.
PreviousInput OTPNext Label

Pesto UI · 117 documented components