General · astro-ui · Kbd

Kbd

Keyboard key cap for documenting shortcuts.

Kbd renders an inline semantic <kbd> styled as a key cap. Optional raised shadow gives physical depth. Use inside prose; describe sequences with an accessible label on a wrapper.

← All components

Features

  • Semantic <kbd>
  • 3 variants incl. borderless muted
  • Raised key-cap shadow
  • 3 sizes, mono font

Usage

---
import { Kbd } from "astro-ui";
---

<p>Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to search.</p>

Demos

Basic

Press Ctrl + K to search.

Enter to submit.

<p>Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to search.</p>
<p><Kbd variant="outline" raised>Enter</Kbd> to submit.</p>

API

Props

PropTypeDefaultDescription
variant"default" | "outline" | "muted""default"Visual style.
size"sm" | "md" | "lg""md"Key cap scale.
raisedbooleanfalseRaised key-cap shadow.
classstring—Merged via cn(); Tailwind classes welcome.
idstring—Element id.
ariaLabelstring—Accessible name.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

  • Semantic <kbd> elements — key sequences are announced as keyboard input

Changelog

Version history mentioning Kbd.

v0.1.0 — 2026-11-11
added
  • General (7): Button, ButtonGroup, Command, Carousel, Clipboard, Kbd, Link.