Kbd

Interactive

See Kbd in Storybook for every variant, with live controls.

A single keycap. Renders a real <kbd>.

import { Kbd } from "@kairosis/eidos";

<span>
  Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to search
</span>;

Props

Prop	Type	Default	Description
children	ReactNode	—	Required. The key

Also accepts every <kbd> attribute.

Guidelines

• One key per Kbd. For a chord, render several side by side rather than ⌘K inside one cap.
• Mono type and a thicker bottom border give it the physical keycap read.
• Use the platform glyphs (⌘, ⇧, ⌥) rather than spelling them out.