icon

Morainev0.5.0

Kbd
elementskbd

Kbd

Keyboard keycap component with configurable size, variant, and accessible label.

View as MarkdownSource Code

Import#

import { Kbd } from 'moraine'

Slot Structure#

Kbd renders a single accessible keycap. Use KbdGroup for shortcut chords and ordered sequences. Static aliases such as meta, enter, escape, and arrowup resolve to familiar key symbols with accessible labels. Set symbol={false} to render the raw key value without alias resolution. Use KbdT.Key in shortcut data models to retain alias autocomplete while accepting custom key names.

root

Examples#

Variants#

Outline, default, and invert visual modes.

function Variants() {
  const VARIANTS = ['outline', 'default', 'invert'] as const


  return (
    <div class="flex flex-wrap gap-3 items-center">
      <For each={VARIANTS}>{(variant) => <Kbd variant={variant} value={variant} />}</For>
    </div>
  )
}

Sizes#

Keycap sizes from xs to xl.

function Sizes() {
  const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const


  return (
    <div class="flex flex-wrap gap-3 items-center">
      <For each={SIZES}>{(size) => <Kbd size={size} value={size.toUpperCase()} />}</For>
    </div>
  )
}

Inline Usage#

Single-key inline hint.

function ShortcutComposition() {
  return (
    <p class="text-sm text-foreground flex flex-wrap gap-2 items-center">
      Close dialogs with
      <Kbd value="escape" />
    </p>
  )
}

API Reference#

Attributes#

Slotroot0 attributes
Keyboard keycap element.
No attribute metadata for this slot.

Props#

PropTypeDefaultDescription
classClassValue—
Class applied to the component root or trigger element.
classesKbdT.Classes | undefined——
labelstring | undefined—
Accessible label for assistive technology.
refJSX.HTMLElementTags["kbd"] extends { ref?: infer Ref; } ? Ref : never | undefined——
size"xs" | "sm" | "md" | "lg" | "xl" | undefined——
slotNamestring | undefined—
Data slot used by the rendered keycap.
styleJSX.CSSProperties | undefined——
stylesKbdT.Styles | undefined——
symbolboolean | undefinedtrue
Whether to resolve known key aliases to symbols.
value*KbdT.Key—
Value displayed by the keycap or resolved through the static key aliases.
variant"default" | "outline" | "invert" | undefined——