BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Kbd

Stable
Edit in Studio

Shows a keyboard key or a key combination, as nested kbd elements in the mono face.

Updated Oct 16, 2026

Rendered with the real component
Light
CmdKEsc
Dark
CmdKEsc

When to use

Use it for

  • Teaching a shortcut in a tooltip, a menu item, an empty state or help text.
  • Inside an Input suffix to hint at the search shortcut.

Not for

  • Code or token names: use code.
  • Buttons: a Kbd is not clickable.

Do and don't

Every example is rendered with the real component, so it always matches what ships.

CmdEnter
Do

Write the platform's key names

Cmd on macOS, Ctrl elsewhere. Abbreviations get a title with the full name.

CtrlShiftAltCmdK
Don't

Long sequences

More than three keys is a recipe, not a shortcut. Explain it in text.

Accessibility

  • Outer kbd wraps one kbd per key, the HTML pattern for keys pressed together; the plus signs are aria-hidden.
  • Abbreviated keys (Cmd, Esc, arrows) carry a title with the full name.
  • Text color is text.muted on surface (4.5:1).

Anatomy and tokens

Read from packages/react/src/components/Kbd/Kbd.module.css at build time. Every value is a token: open one to see its alias chain in both themes.

16 tokens 7 semantic or component, change with theme and brand 9 from the shared scales

Props

Parsed from the TypeScript types in packages/react/src/components/Kbd/Kbd.tsx, so this table cannot drift from the code.

Prop Type Default Description
keys required string | string[] none One key ("Esc") or a combination (["Cmd", "K"]) pressed together.
size 'sm' | 'md' 'md' No description in the code yet.

Playground

Change the props and see the real Kbd update. Controls are generated from the TypeScript props; nothing here changes the system.

CmdK
<Kbd />
size

Workbench

For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Kbd in Storybook) .

Embed Storybook stories here (3)

Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.

Combination

SingleKey

AllStates

Changelog

  • New

    Data display: Card restyled as a flat plate with an `interactive` option and padding sizes; Badge gains `appearance` (subtle, now the default, or solid), a dot, icons and sizes (existing solid badges must pass `appearance="solid"` to keep their look); new Avatar and AvatarGroup, Table (sortable headers with aria-sort, selectable rows, sticky header, focusable scroll region, useTableSort), Accordion, Tag (removable, toggleable), Divider and Kbd. Adds avatar, tag, kbd, divider and accordion component tokens.

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

All release notes