Kbd

Preview

This preview uses documentation-only styling. Ship with one of the included recipe outputs (CSS, Tailwind, or UnoCSS) for production styles.

Kbd renders a semantic <kbd> element for displaying keyboard shortcuts and key combinations. Use it to document keyboard interactions within instructions, help text, or interface labels.

#Usage

Kbd has a single Root part. Pass the key name or combination as children.

import * as Kbd from "@solidiom/kbd"

;<p>
  Press <Kbd.Root>Ctrl</Kbd.Root> + <Kbd.Root>S</Kbd.Root> to save.
</p>

#Installation

Install the package with pnpm add @solidiom/kbd. The package requires compatible solid-js and @solidjs/web peer dependencies.

#Styling

Kbd carries data-scope="kbd" and data-part="root" attributes. Style it with a monospace font, a subtle background, and a border to distinguish it from surrounding text. The element inherits browser default <kbd> styling; override with your recipe for a consistent appearance.

#Parts

Kbd exposes a single Root part. It renders an inline <kbd> element with data-scope="kbd" and data-part="root" attributes.

#Keyboard & behavior

This primitive has no keyboard interaction. It renders static content that does not receive focus or respond to key events.

#SSR and hydration

Kbd is a passive display element with no interactive state. It renders as static HTML and requires no client-side hydration.

solidiom add kbd