A keyboard-key chip: the little cap you put next to a menu item, in a command palette trigger, or down the side of a shortcuts cheat sheet.
Renders semantic <kbd> elements, so screen readers and copy/paste both do
the right thing. There is no interactive behaviour and no JavaScript.
<.kbd>K</.kbd>
<.kbd keys={["cmd", "K"]} />
<.kbd keys={["ctrl", "shift", "P"]} separator="then" size="sm" />Single key vs sequence
With the default slot you get exactly one <kbd> and whatever you put in it.
With keys you get one <kbd> per key wrapped in a group, with the
separator glyph rendered between them and hidden from assistive tech
(the <kbd> elements already say what the shortcut is).
The symbol map
Known key names are folded to their glyph, case-insensitively. Anything the
map does not know renders verbatim, so <.kbd keys={["cmd", "K"]} /> gives
you ⌘ and a literal K.
| Names | Glyph |
|---|---|
cmd, command, meta, super, win | ⌘ |
shift | ⇧ |
alt, opt, option | ⌥ |
ctrl, control | ⌃ |
enter, return | ↵ |
esc, escape | Esc |
tab | ⇥ |
backspace | ⌫ |
delete, del | ⌦ |
space | ␣ |
up, down, left, right | ↑ ↓ ← → |
pageup / pagedown | PgUp / PgDn |
capslock | ⇪ |
Related
PetalComponents.Typography.inline_code/1 is the sibling chip for code
snippets in prose. Same cap radius, mono type instead of sans, and no key
semantics. Use <.kbd> when the reader is meant to press something.
Summary
Functions
A keyboard-key chip.
Functions
A keyboard-key chip.
<.kbd>K</.kbd>
<.kbd keys={["cmd", "shift", "P"]} size="sm" />Attributes
class(:any) - CSS class. Defaults tonil.size(:string) - chip size. sm is the dense variant for table rows and sidebars. Defaults to"md". Must be one of"sm", or"md".keys(:list) - renders a key sequence with separator glyphs, e.g. keys={["cmd", "K"]}. Known names ("cmd", "shift", "alt", "ctrl", "enter", "esc", "tab", "backspace", arrows) map to their symbols; unknown strings render verbatim. Defaults tonil.separator(:string) - glyph between keys in a sequence; nil renders the keys with no separator at all. Defaults to"+".- Global attributes are accepted. any extra HTML attributes, e.g. title or data-*.
Slots
inner_block- single-key content when keys is not used.