Kbd

Usage

value resolves a small set of common key names to their symbol - anything else (a letter, a digit) renders as-is:

<SKbd value="meta" /><SKbd>K</SKbd>

Keys

Every built-in symbol value resolves:

meta/command/cmd → ⌘, ctrl/control → ⌃, alt/option → ⌥, shift → ⇧, enter/return → ↵, backspace → ⌫, delete → ⌦, tab → ⇥, capslock → ⇪, escape/esc → Esc, up/down/left/right → ↑/↓/←/→, space → Space. Anything else - a bare K, a digit - is kept as the literal string, so value also works as a plain shorthand for the default slot.

Sizes

<SKbd size="sm" value="meta" />
<SKbd size="md" value="meta" />
<SKbd size="lg" value="meta" />

In markdown

Every Selaras component is already globally registered under its S-prefixed name - a bare ::s-kbd{...} block works with no extra wiring (see Callout's own "In markdown" section for how the pattern works generally):

::s-kbd{value="meta"}
::

Custom :ui

To see exactly what you'd be overriding - the current default classes for every slot and variant - here's Kbd's own theme file:

Global and scoped theme recipes use ui.kbd.

Props

Slots