---
title: Kbd
description: Keyboard keycap component with configurable size, variant, and accessible label.
sidebar:
  order: 13
search:
  tags: [keyboard, shortcut, keycap, hotkey]
---

# Kbd

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

## Import

```tsx
import { Kbd } from 'moraine'
```

## Slot Structure

`Kbd` renders a single accessible keycap. Use [`KbdGroup`](https://ui.subf.dev/kbd-group.md) 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.

```text
root
```

## Examples

### Variants

Outline, default, and invert visual modes.

```tsx
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.

```tsx
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.

```tsx
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

#### `root`

Keyboard keycap element.

### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| class | ClassValue | — | Class applied to the component root or trigger element. |
| classes | KbdT.Classes \| undefined | — | — |
| label | string \| undefined | — | Accessible label for assistive technology. |
| ref | JSX.HTMLElementTags["kbd"] extends { ref?: infer Ref; } ? Ref : never \| undefined | — | — |
| size | "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined | — | — |
| slotName | string \| undefined | — | Data slot used by the rendered keycap. |
| style | JSX.CSSProperties \| undefined | — | — |
| styles | KbdT.Styles \| undefined | — | — |
| symbol | boolean \| undefined | true | 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 | — | — |

### ARIA

Accessibility attributes and roles emitted by the component markup.

| Attribute | Type | Description |
| --- | --- | --- |
| aria-label | boolean \| string \| undefined | Provides an accessible label when visible text is not sufficient. |

### Data Attributes

State and slot attributes exposed for styling hooks and selectors.

| Attribute | Type | Description |
| --- | --- | --- |
| data-slot | string | Identifies the rendered slot for styling hooks and selectors. |