---
title: Kbd
description: Display one keyboard key as shortcut notation.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---

# Kbd

> Display one keyboard key as shortcut notation.

Use Kbd to display one key in a shortcut hint. Combine keys with [KbdGroup](https://moraine.subf.dev/components/kbd-group.md); showing a shortcut does not register a keyboard handler.

## Basic usage

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

export function Example() {
  return <Kbd value="K" />
}
```

## Anatomy

```text
Kbd [component; slot=root; <kbd>]
```

## Usage

### Root styling

`Kbd` renders one `<kbd>` root, so use direct `class` and `style` props for an individual keycap. Configure `kbd.base.root` in your Theme to share keycap presentation; `classes` and `styles` are reserved for components with multiple rendered slots.

```tsx
import { Kbd, MoraineProvider } from 'moraine'
import { defineTheme } from 'moraine/theme'

const theme = defineTheme({
  kbd: { base: { root: 'rounded-none' } },
})

export function RootStyling() {
  return (
    <div class="w-full space-y-6">
      <div class="space-y-2">
        <p class="text-sm text-muted-foreground">Instance class and style</p>
        <Kbd value="K" class="text-blue-600" style={{ 'border-radius': '8px' }} />
      </div>
      <MoraineProvider theme={theme}>
        <div class="space-y-2">
          <p class="text-sm text-muted-foreground">Local Theme defaults</p>
          <Kbd value="K" />
        </div>
      </MoraineProvider>
    </div>
  )
}
```

### Keyboard notation

Use `Kbd` for a single key or keycap in instructional text. It conveys displayed keyboard notation; application-level shortcut registration and platform-specific behavior remain outside the component.

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

export function KbdUsage() {
  return (
    <div class="flex flex-wrap gap-3 items-center">
      <span class="text-sm text-muted-foreground flex gap-1.5 items-center">
        Press <Kbd value="command" /> <Kbd value="k" /> to search
      </span>
      <span class="text-sm text-muted-foreground flex gap-1.5 items-center">
        Press <Kbd value="escape" /> to cancel
      </span>
    </div>
  )
}
```

## Examples

### Shortcut composition

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

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

## Props

Props for the Kbd component.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | string \| undefined | — | Accessible label for assistive technology. |
| size | 'sm' \| 'md' \| 'lg' \| undefined | 'md' | Visual size of the component. |
| slotName | string \| undefined | — | Data slot used by the rendered keycap. |
| symbol | boolean \| undefined | true | Whether to resolve known key aliases to symbols. |
| value* | Key | — | Value displayed by the keycap or resolved through the static key aliases. |
| variant | 'default' \| 'outline' \| 'invert' \| undefined | 'default' | Visual treatment of the component. |
| class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. |
| classes | Classes \| undefined | — | Family slot class defaults for this instance. |
| style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. |
| styles | Styles \| undefined | — | Family slot style defaults for this instance. |