Skip to main content
xoji

Kbd
Info:Display html svelte astro Success: coverage 12/12

A keycap for the keys in a shortcut.

Live demo

live · @xoji/astro

Kbd

Chords
Ctrl

+

 K
Ctrl

+

 Shift

+

 P

Sizes
Esc Enter Space

Inline

Press / to search, or Esc to dismiss.

Kbd renders a single key as a physical keycap: a mono-faced label on a raised surface, the depth read from a heavier bottom edge rather than a drop shadow, so it sits cleanly inline in running text. It carries no layout of its own: set a few side by side in a Cluster to spell a chord (Ctrl + K).

Everything about its look is derived chrome: the surface, the edge, the radius all come from the same tokens the rest of the theme does, so a keycap matches the UI it documents. The size prop steps it with the surrounding type from sm to lg.

When to use

How this component composes with the rest of the set.

Spell a chord by setting keys in a Cluster with a small gap: Ctrl + K.
Drop a Kbd inline in Text to name a shortcut mid-sentence. It sits on the baseline without breaking the line.
Pair shortcuts with their actions in a Table or a Stack of Clusters for a key map.

Props

1 prop, straight from the manifest.

PropTypeDefaultBindingsDescription
size KbdSize
sm md lg
md
html svelte astro
The keycap size, stepping with the type scale: `sm`, `md`, or `lg`.

Appearance

Sizes

sm
.xoji-kbd--sm

A compact keycap for dense inline hints.

md

 default
.xoji-kbd

The default keycap, sized with body text.

lg
.xoji-kbd--lg

A prominent keycap for a featured shortcut.

Anatomy

The named parts that make up the component, with their selectors.

kbd

 .xoji-kbd

The keycap root: a raised surface with a weighted bottom edge.
--bg-2 --fg-1 --line-2 --border-thick --radius-sm --font-mono

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered 12/12 consumed tokens produced default register: 276 tokens

Live coverage check against the xoji-default register (derive(xojiDefault, { anchors }) → coverComponent(manifest, register)). Every token this component consumes must be a key the algorithm produces.

--bg-2 --border-thick --border-thin --fg-1 --font-mono --leading-tight --line-2 --radius-sm --text-lg --text-sm --text-xs --weight-medium

Slots
default
html svelte astro

The key label: a glyph or short word like K, Esc, or Enter.

Accessibility
Renders the semantic <kbd> element, so assistive tech announces the content as keyboard input.
Keep the label the literal key name; the keycap styling is presentational and adds no meaning of its own.

Code

Keys and sizes

Single keys and a chord, shown across the three sizes.

 
<xoji-kbd>Ctrl</xoji-kbd>
<xoji-kbd>K</xoji-kbd>

<xoji-kbd size="sm">Esc</xoji-kbd>
<xoji-kbd size="lg">Enter</xoji-kbd>
 
<script lang="ts">
	import { Kbd } from "@xoji/svelte";
</script>

<Kbd>Ctrl</Kbd>
<Kbd>K</Kbd>
 
---
import Kbd from "@xoji/astro/Kbd.astro";
---

<Kbd>Ctrl</Kbd>
<Kbd>K</Kbd>