Kbd
A keycap for the keys in a shortcut.
Live demo
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, and an optional tone tints the whole keycap (face, edge, and label) to any of the semantic roles or named hues for a primary-chord or status key.
When to use
How this component composes with the rest of the set.
Cluster with a small gap: Ctrl + K. Text to name a shortcut mid-sentence. It sits on the baseline without breaking the line. Table or a Stack of Clusters for a key map. Props
2 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
Appearance
Sizes
sm
A compact keycap for dense inline hints.
md
The default keycap, sized with body text.
lg
A prominent keycap for a featured shortcut.
Anatomy
The named parts that make up the component, with their selectors.
kbd
The keycap root: a raised surface with a weighted bottom edge.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xtyle-default register
(derive(xtyleDefault, { anchors }) →
coverComponent(manifest, register)). Every token this component
consumes must be a key the algorithm produces.
--accent
--accent-2
--accent-2-bg
--accent-2-text
--accent-3
--accent-3-bg
--accent-3-text
--accent-4
--accent-4-bg
--accent-4-text
--accent-bg
--accent-text
--bg-2
--black
--black-bg
--black-text
--blue
--blue-bg
--blue-text
--border-thick
--border-thin
--brown
--brown-bg
--brown-text
--cyan
--cyan-bg
--cyan-text
--danger
--danger-bg
--danger-text
--fg-1
--font-mono
--gray
--gray-bg
--gray-text
--green
--green-bg
--green-text
--info
--info-bg
--info-text
--leading-tight
--line-2
--neutral
--neutral-bg
--neutral-text
--orange
--orange-bg
--orange-text
--pink
--pink-bg
--pink-text
--purple
--purple-bg
--purple-text
--radius-sm
--red
--red-bg
--red-text
--success
--success-bg
--success-text
--text-lg
--text-sm
--text-xs
--warn
--warn-bg
--warn-text
--weight-medium
--white
--white-bg
--white-text
--yellow
--yellow-bg
--yellow-text
Slots
The key label: a glyph or short word like K, Esc, or Enter.
Accessibility
<kbd> element, so assistive tech announces the content as keyboard input. Code
Keys and sizes
Single keys and a chord, shown across the three sizes.
<xtyle-kbd>Ctrl</xtyle-kbd>
<xtyle-kbd>K</xtyle-kbd>
<xtyle-kbd size="sm">Esc</xtyle-kbd>
<xtyle-kbd size="lg">Enter</xtyle-kbd><script lang="ts">
import { Kbd } from "@xtyle/svelte";
</script>
<Kbd>Ctrl</Kbd>
<Kbd>K</Kbd>---
import Kbd from "@xtyle/astro/Kbd.astro";
---
<Kbd>Ctrl</Kbd>
<Kbd>K</Kbd>Toned keycaps
A tone tints the whole keycap for a primary-chord or status key.
<xtyle-kbd tone="accent">⌘</xtyle-kbd>
<xtyle-kbd tone="success">Enter</xtyle-kbd>
<xtyle-kbd tone="danger">Del</xtyle-kbd><script lang="ts">
import { Kbd } from "@xtyle/svelte";
</script>
<Kbd tone="accent">⌘</Kbd>
<Kbd tone="danger">Del</Kbd>---
import Kbd from "@xtyle/astro/Kbd.astro";
---
<Kbd tone="accent">⌘</Kbd>
<Kbd tone="danger">Del</Kbd>