Kbd

kai-kbd

Mod renders as ⌘ on a Mac and Ctrl everywhere else, so one spec covers both.

• Shadow DOM
• Display only
• Platform glyphs
• Groups with kai-kbd-group

Preview

When to use

Show the shortcut next to the control it triggers: a menu row, a toolbar button, an icon button. It never binds the keys, so your own keydown handler still does the work.

Usage

Set keys to the tokens joined by + and you get one cap per token, in the order you wrote them. platform defaults to auto, which sniffs the OS so Mod renders as ⌘ on a Mac and Ctrl everywhere else; pass mac or other when you need a fixed glyph set (a screenshot, a comparison). size defaults to md, with sm for tight rows.

<kai-kbd keys="Mod+K"></kai-kbd>
<kai-kbd keys="Mod+Shift+ArrowUp" platform="mac"></kai-kbd>
<kai-kbd keys="Esc" size="sm"></kai-kbd>

Omit keys to render your own content in the default slot. That covers a key the token map does not, or a cap you want to label yourself.

<kai-kbd>Esc</kai-kbd>

Next to a label

The menu-row shape, the shortcut at the trailing edge of the thing it triggers.

Command palette

Inside a button

The label carries its own shortcut, so the hint travels with the action. Any element that slots children can hold a <kai-kbd>.

Accept Search

<kai-button variant="outline">
  Accept
  <kai-kbd keys="Enter"></kai-kbd>
</kai-button>

One key, welded from several elements

<kai-kbd-group> welds its <kai-kbd> children into ONE key strip: no gap between the caps, a single hairline at each seam, and rounded corners only at the strip’s ends. Reach for it when one key is spelled with caps that come from more than one element, or as a sequence you press in order, because a single keys spec cannot express either.

one key from two kbd elements a sequence

<!-- one key: the group welds its caps into one strip -->
<kai-kbd-group>
  <kai-kbd keys="Mod"></kai-kbd>
  <kai-kbd keys="K"></kai-kbd>
</kai-kbd-group>

<!-- one sequence: G then D -->
<kai-kbd-group>
  <kai-kbd keys="G"></kai-kbd>
  <kai-kbd keys="D"></kai-kbd>
</kai-kbd-group>

Two DIFFERENT shortcuts are not a group: write them as two <kai-kbd> elements, or two groups, and let your own layout space them. The weld is what says the caps are one key, so a group used for two shortcuts says the wrong thing. A single <kai-kbd> with a +-joined spec renders its own caps as one chord, with the 2px gap the separator part sits in.

Group props

<kai-kbd-group> declares no props of its own beyond the universal theme. Which caps exist and in what order is your markup’s business.

In a tooltip

A shortcut often belongs in the tip of the control it triggers. The tooltip bubble takes markup through its content slot, so the cap rides along:

SaveSave changes

<kai-tooltip>
  <kai-button variant="outline">Save</kai-button>
  <span slot="content">Save changes <kai-kbd keys="Mod+S"></kai-kbd></span>
</kai-tooltip>

The bubble is an inverted surface, and it re-expresses the muted, border and foreground tokens on itself, so the cap adapts to the bubble rather than carrying the page’s light-surface colours into it. Any kit component can live there for the same reason; see Tooltip.

Glyphs per platform

platform="auto" is right for most apps. These are the glyphs mac and other resolve to, so you can pick a fixed one when it matters.

Token	platform="mac"	platform="other"
Mod	⌘	Ctrl
Shift	⇧	⇧
Alt	⌥	Alt
ArrowUp	↑	↑
Enter	⏎	Enter
Esc	Esc	Esc

A token with no mapping renders uppercased, so k becomes K.

Styling

Every cap is one part and the gap between caps is another, so you can restyle the surface, border, radius or font without touching the shadow root.

Part	Purpose	Example
key	Each key cap. Restyle its surface, border, radius, or font.	kai-kbd::part(key) { border-radius: 0.375rem }
separator	The gap between key caps. Inject a literal joiner (e.g. a plus sign) from outside.	kai-kbd::part(separator)::after { content: "+" }

The group’s frame is a single part (part="group"); each cap inside it keeps its own key part.

Props

Property	Type	Default	Notes
theme	"light" | "dark" | "auto"	'auto'	Color mode (`auto` follows prefers-color-scheme).
keys	string	—	Shortcut spec: tokens joined by `+` (e.g. `Mod+Shift+K`). Omit it to show default-slot content instead. Display only; the element does not bind keys.
platform	"auto" | "mac" | "other"	'auto'	`mac` uses ⌘/⌥, `other` uses Ctrl. `auto` (default) sniffs the OS.
size	"sm" | "md"	'md'	Cap size. Defaults to `md`.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

Kbd

---

Need a hand? Report a bug Ask for help