TuxKbd

single keys

One key

Pass a single key as value. Known names — escape, enter, arrowup, tab, space, etc. — render their canonical glyph; everything else passes through verbatim (single letters get upper-cased).

<TuxKbd value="esc" />
<TuxKbd value="enter" />
<TuxKbd value="?" />
<TuxKbd value="/" />

combos

Multi-key combos

Pass keys as an array. Each renders as a separate <kbd>; a separator prop sets the glue between them ( "" for tight, "+" for explicit ). Modifier names use the defineShortcuts grammar (meta, ctrl, shift, alt) so a binding declaration and its rendered hint share a vocabulary.

<TuxKbd :keys="['meta', 'k']" />
<TuxKbd :keys="['meta', 'shift', 'p']" />
<TuxKbd :keys="['ctrl', 'enter']" separator="+" />

sequences

Sequence shortcuts

For GitHub-style two-key sequences (g then c), render each step as its own TuxKbd with a plaintext "then" between. The shortcuts-help overlay uses this idiom automatically — any keys array without a modifier is classified as a sequence.

<TuxKbd value="g" /> then <TuxKbd value="t" />
<TuxKbd value="g" /> then <TuxKbd value="c" />

arrows + glyphs

Built-in glyphs

Recognised keys render the corresponding Unicode glyph instead of the raw name. Useful so a shortcut hint reads as the actual key on the keyboard rather than the JavaScript event name.

<TuxKbd value="arrowup" />
<TuxKbd value="arrowdown" />
<TuxKbd value="arrowleft" />
<TuxKbd value="arrowright" />

size

Three sizes

xs for compact footer-row hints (smallest chrome, fits multiple pairs on one line), sm for in-list affordances (the default), lg for the shortcuts-help overlay and standalone documentation.

<TuxKbd value="esc" size="xs" />   <!-- 0.625rem, footer-row hints -->
<TuxKbd value="esc" size="sm" />   <!-- 0.6875rem, default in-list -->
<TuxKbd value="esc" size="lg" />   <!-- 0.8125rem, help overlays -->

slot

Custom content

For anything that doesn't fit a single key string — function keys, multi-character glyphs, icons — pass content via the default slot.

<TuxKbd><span class="text-xs">F1</span></TuxKbd>

props

Props

• value — single key name. Mutually exclusive with keys.
• keys — array of key names for a combo.
• size — "xs" | "sm" | "lg". Defaults to "sm".
• separator — string rendered between keys in a combo. Empty by default (kbds sit flush).
• Default slot — used when neither value nor keys is set.