Kbd

The <Kbd> component renders keyboard shortcuts using the semantic <kbd> element. It handles platform-specific formatting. Mac uses symbols with no separator, other platforms use full names with +.

Properties

Name
Default
Description
keys
A single key string or an array of key strings. Modifier keys (mod, ctrl, alt, shift, meta) are recognized and formatted for the current platform.
size
small
Size of the badge. Predefined values: small, medium, large. Any CSS font-size value (e.g. "14px", "1rem") is also accepted as a custom size.

Sizes

<Kbd keys="s" size="small" />
<Kbd keys="s" size="medium" />
<Kbd keys="s" size="large" />
<Kbd keys="s" size="1.2rem" />
S S S S

Single key

<Kbd keys="s" />
<Kbd keys="Enter" />
<Kbd keys="Escape" />
S Enter Escape

Modifier keys

Use mod for the platform's primary modifier — ⌘ on Mac, Ctrl elsewhere. Use ctrl for literal Control on all platforms.

<Kbd keys={['mod', 's']} />
<Kbd keys={['mod', 'shift', 'k']} />
<Kbd keys={['ctrl', 's']} />
<Kbd keys={['alt', 'F4']} />
Ctrl + S   Shift + Ctrl + K   Ctrl + S   Alt + F4

Inline badge

Pair a single-letter shortcut badge with a button using the start snippet. The badge sizes to a square for single characters.

<Button>
    {#snippet start()}
        <Kbd keys="p" />
    {/snippet}
    Publish
</Button>
<Button color="red">
    {#snippet start()}
        <Kbd keys="d" />
    {/snippet}
    Delete
</Button>

Above button

To show the shortcut above the button label, wrap both in a flex column.

<div style="display: inline-flex; flex-direction: column; align-items: center; gap: 4px;">
    <Kbd keys="p" />
    <Button>Publish</Button>
</div>
P
D
E

Overlapping

For a badge that overlaps the top edge of the button, use position: relative on the wrapper and position: absolute on the <Kbd>.

<div style="position: relative; display: inline-block; margin-top: 1em;">
    <Kbd style="position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);" keys="p" />
    <Button>Publish</Button>
</div>
P
D
E

Modifier key reference

Key
Mac
Other
Notes
mod
⌘
Ctrl
Platform primary modifier
ctrl
⌃
Ctrl
Always literal Control
alt
⌥
Alt
shift
⇧
Shift
meta
⌘
Win
OS/Super key

Platform formatting

On Mac, modifiers are shown as symbols with no separator and in canonical order (Control → Option → Shift → Command). On other platforms, full names are joined with +.

<!-- Mac:   ⇧⌘K  -->
<!-- Other: Shift + Ctrl + K -->
<Kbd keys={['mod', 'shift', 'k']} />
Shift + Ctrl + K

Accessibility

The component adds an aria-label that spells out symbols as words, so screen readers announce "Shift plus Command plus K" rather than reading glyph names.