# Kbd Displays a keyboard shortcut as key caps.

kai-kbd

Mod renders as ⌘ on a Mac and Ctrl everywhere else, so one spec covers both. ## Preview > **tip:** 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. ```html ``` 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. ```html Esc ``` ### 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 ``.
Accept Search
```html Accept ``` ### One key, welded from several elements `` welds its `` 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
```html ``` Two DIFFERENT shortcuts are not a group: write them as two `` 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 `` with a `+`-joined spec renders its own caps as one chord, with the 2px gap the `separator` part sits in. > **note:** `` 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:
Save Save changes
```html Save Save changes ``` 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](/components/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. The group's frame is a single part (`part="group"`); each cap inside it keeps its own `key` part. ## Props ## Composed from