Kbd

Preview

RTL Open

Show code tsx Copy

Sizes

Three sizes — sm, md (default), and lg — scale padding, font-size, and icon glyphs together so a keycap sits cleanly next to body text of the matching size.

Preview

RTL Open

Show code tsx Copy

Modifier glyphs

Pass macOS-style glyphs (⌘, ⇧, ⌥, ⌃, ⌫, ↵, arrows) and Kbd auto-swaps them for rendered Lucide icons inside the keycap — never a bare Unicode character.

Preview

RTL Open

Show code tsx Copy

Shortcut combinations

Compose multi-key shortcuts by chaining <Kbd> elements with a literal + separator so the combination reads naturally when styling is unavailable.

Preview

RTL Open

Show code tsx Copy

Inline in prose

Kbd slots into a Text paragraph for shortcut hints in onboarding or help copy.

Preview

RTL Open

Show code tsx Copy

API

PropTypeDefaultDescription

size

"sm"|"md"|"lg"

"md"

Keycap scale — adjusts padding, font-size, and inline-swapped icon size together so caps sit naturally alongside body text at the same step.

className

string

—

Additional class names appended after Cynosure's base classes.

style

CSSProperties

—

Inline style overrides merged last.

children

ReactNode

—

Keycap label. Strings are walked grapheme-by-grapheme so combined shortcuts (e.g. `"⌘R"`) swap known modifier glyphs for `lucide` icons.

padding

Responsive<SpaceToken>

—

Padding on all four sides. Token from the spacing scale.

paddingX

Responsive<SpaceToken>

—

Horizontal padding (left + right). Overrides `padding` on the X axis.

paddingY

Responsive<SpaceToken>

—

Vertical padding (top + bottom). Overrides `padding` on the Y axis.

paddingTop

Responsive<SpaceToken>

—

Padding on the top edge. Beats `padding` / `paddingY`.

paddingRight

Responsive<SpaceToken>

—

Padding on the right (inline-end in RTL) edge.

paddingBottom

Responsive<SpaceToken>

—

Padding on the bottom edge.

paddingLeft

Responsive<SpaceToken>

—

Padding on the left (inline-start in RTL) edge.

margin

Responsive<MarginValue>

—

Margin on all four sides. Accepts the spacing scale or `"auto"`.

marginX

Responsive<MarginValue>

—

Horizontal margin (left + right). Use `"auto"` to centre.

marginY

Responsive<MarginValue>

—

Vertical margin (top + bottom).

marginTop

Responsive<MarginValue>

—

Margin on the top edge.

marginRight

Responsive<MarginValue>

—

Margin on the right edge.

marginBottom

Responsive<MarginValue>

—

Margin on the bottom edge.

marginLeft

Responsive<MarginValue>

—

Margin on the left edge.

width

Responsive<SizeValue>

—

Element width. Accepts a `SpaceToken`, `LengthValue`, or named alias.

height

Responsive<SizeValue>

—

Element height. Accepts a `SpaceToken`, `LengthValue`, or named alias.

minWidth

Responsive<SizeValue>

—

Minimum width — useful for preventing flex children from collapsing.

maxWidth

Responsive<SizeValue>

—

Maximum width — `"prose"` caps to a comfortable reading measure.

minHeight

Responsive<SizeValue>

—

Minimum height.

maxHeight

Responsive<SizeValue>

—

Maximum height.

background

Responsive<ColorToken>

—

Background colour. Use a `ColorToken` like `"bg.surface"` for theme awareness.

color

Responsive<ColorToken>

—

Text colour. Inherits unless set.

borderColor

Responsive<ColorToken>

—

Border colour. Pair with `borderWidth` to make the border visible.

borderWidth

Responsive<BorderWidth>

—

Border thickness in scale steps.

borderStyle

Responsive<BorderStyle>

—

Border line style.

borderRadius

Responsive<RadiusToken>

—

Corner rounding token.

boxShadow

Responsive<ShadowToken>

—

Drop-shadow token from the elevation scale.

opacity

Responsive<number | `${number}`>

—

Opacity 0–1. Use sparingly — prefer surface tokens over translucency.

overflow

Responsive<Overflow>

—

How content that exceeds the box is handled.

overflowX

Responsive<Overflow>

—

Horizontal-axis overflow control. Overrides `overflow` for the X axis.

overflowY

Responsive<Overflow>

—

Vertical-axis overflow control.

display

Responsive<Display>

—

CSS `display` value. `"contents"` removes the element's box from layout.

position

Responsive<Position>

—

CSS `position`. Pair with `top`/`right`/`bottom`/`left` for placement.

top

Responsive<InsetValue>

—

Top inset (when positioned). Accepts a `SpaceToken`, `"auto"`, `"0"`, or `LengthValue`.

right

Responsive<InsetValue>

—

Right inset (when positioned).

bottom

Responsive<InsetValue>

—

Bottom inset (when positioned).

left

Responsive<InsetValue>

—

Left inset (when positioned).

zIndex

Responsive<ZIndexToken>

—

Stacking-context layer token (`"modal"`, `"tooltip"`, …).

gridColumn

Responsive<string>

—

Grid-column shorthand (e.g. `"1 / 3"`, `"span 2"`).

gridRow

Responsive<string>

—

Grid-row shorthand.

gridArea

Responsive<string>

—

Named grid area.

flex

Responsive<"1" | "none" | "auto" | "initial" | (string & {})>

—

Shorthand: `1 | auto | none | initial | <css>`. Resolves to `flex` on the child.

flexGrow

Responsive<number | `${number}`>

—

Grow factor inside a flex container.

flexShrink

Responsive<number | `${number}`>

—

Shrink factor inside a flex container.

flexBasis

Responsive<"content" | SizeValue>

—

Initial main-axis size before grow/shrink.

alignSelf

Responsive<AlignSelf>

—

Override `align-items` for a single child.

justifySelf

Responsive<JustifySelf>

—

Override `justify-items` for a single child (grid).

order

Responsive<number | `${number}`>

—

Flex/grid child reorder index.

asChild

boolean

—

When `true`, renders the primitive's single React child via `Slot`, forwarding className/style/ref/event handlers onto it.

Accessibility

• Renders the semantic <kbd> element so keyboard input is announced distinctly from surrounding prose.
• Swapped-in glyph icons (⌘, ⇧, arrows, etc.) are marked aria-hidden — the keycap’s text content is what assistive tech reads, so prefer including a readable label like <Kbd>Cmd</Kbd> over <Kbd>⌘</Kbd> when the audience may use a non-Mac keyboard.
• Use the casing the user sees on their keyboard so the rendered hint matches the physical key.
• Pair shortcut hints with the action they trigger; never rely on the keycap alone to convey the available command.

Recipes

• Pair with Text for inline hints: Press <Kbd>Esc</Kbd> to close.
• Group Kbd elements inside command menus and tooltips to teach shortcuts contextually.
• Use size="sm" next to a Text size="sm" line so keycaps don’t dominate dense rows.
• Keep keycap content short — single keys or modifier names work best; combinations should be split across multiple <Kbd> elements.