Kbd

A keyboard-key chip — a semantic <kbd> element styled as a monospace bordered chip. Use it to represent individual keys, modifier keys, or multi-key shortcuts inline in prose or UI hints.

The examples are organised by layer: the class reference is the standalone @oriui/css layer, and the Framework API is the @oriui/vue component. Every example is live — flip its code between HTML (the standalone classes, also your htmx / Astro / Svelte / plain-HTML usage), Vue; HTML is the default.

Classes

A kbd chip is a single block class. There are no size, color, or variant utilities — the chip inherits its color from the surrounding text and its radius from the baked sm default.

Single key

Pass the key label via the text prop or the default slot.

<kbd class="ori-kbd">Esc</kbd>
<kbd class="ori-kbd">Enter</kbd>
<kbd class="ori-kbd">Tab</kbd>
<kbd class="ori-kbd">Space</kbd>

<OriKbd text="Esc" />
<OriKbd text="Enter" />
<OriKbd text="Tab" />
<OriKbd text="Space" />

Shortcut combo

Compose multiple chips to represent a keyboard shortcut. Separate them with a literal + in between.

<kbd class="ori-kbd">Ctrl</kbd> + <kbd class="ori-kbd">K</kbd>

<OriKbd text="Ctrl" />
+
<OriKbd text="K" />

<kbd class="ori-kbd">Ctrl</kbd> + <kbd class="ori-kbd">Shift</kbd> + <kbd class="ori-kbd">P</kbd>

<OriKbd text="Ctrl" />
+
<OriKbd text="Shift" />
+
<OriKbd text="P" />

Inline in text

The chip is inline-flex and tracks the surrounding font size, so it flows naturally inside a sentence or tooltip hint.

<p>Press <kbd class="ori-kbd">Esc</kbd> to close the dialog.</p>

<p>Press <OriKbd text="Esc" /> to close the dialog.</p>

Via slot

When the key label is dynamic or needs rich content, use the default slot instead of the text prop. The slot replaces the prop — if both are supplied the slot wins.

<kbd class="ori-kbd">⌘</kbd>
<kbd class="ori-kbd">⇧</kbd>
<kbd class="ori-kbd">⌥</kbd>

<!-- slot form — useful when the label is dynamic -->
<OriKbd>⌘</OriKbd>
<OriKbd>⇧</OriKbd>
<OriKbd>⌥</OriKbd>

Common patterns

Command palette hint

A two-column shortcut list — the pattern used in command palettes and help overlays.

<p><kbd class="ori-kbd">Ctrl</kbd> + <kbd class="ori-kbd">K</kbd> opens the command palette.</p>
<p><kbd class="ori-kbd">Ctrl</kbd> + <kbd class="ori-kbd">/</kbd> toggles comments.</p>
<p><kbd class="ori-kbd">Ctrl</kbd> + <kbd class="ori-kbd">S</kbd> saves the file.</p>

<p><OriKbd text="Ctrl" /> + <OriKbd text="K" /> opens the command palette.</p>
<p><OriKbd text="Ctrl" /> + <OriKbd text="/" /> toggles comments.</p>
<p><OriKbd text="Ctrl" /> + <OriKbd text="S" /> saves the file.</p>

Accessibility

The accessibility contract holds across every layer — the standalone classes and the Vue component render the same markup.

• Renders a real <kbd> element by default. The <kbd> element is the correct semantic choice for keyboard input and is recognized by assistive technology as user input / a key name.
• The chip is purely presentational — it carries no role, tabindex, or ARIA attributes of its own. The surrounding text provides context.
• When representing a multi-key shortcut, each key gets its own <kbd> element — this is the pattern specified by the HTML spec for chords.
• No keyboard interaction is defined; the chip is not interactive.

Framework API

The props, events, and slots of the Vue component. The standalone CSS layer has no component API — its surface is the classes above. (Svelte bindings are planned.)

Props

Events & attributes

OriKbd declares no custom events and does not set inheritAttrs: false, so native attributes (class, style, id, data-*, event listeners, …) fall through to the rendered element.

Slots