<!-- Protocore Design System — Kbd -->
# Kbd

- **Category:** Typography (`typography`)
- **Slug:** `typography/kbd`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { Kbd } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/typography/kbd

> Key cap — a small sunken mono chip for keyboard shortcuts.

## When to use it

Use `Kbd` whenever you name a keyboard key or shortcut in text — in help copy, tooltips, command menus, or docs. It renders the raised key-cap that readers recognise instantly as "press this."

For a literal code token (a function, a value, a path) use `Code` instead — same mono family, but a sunken chip that means "code," not "key." For a chord, render one `Kbd` per key rather than putting `⌘+K` inside a single cap; separate caps read more clearly as physical keys.

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `className` | `string` | no | — | — |
| `style` | `CSSProperties` | no | — | — |

## Examples

### Basics

`Kbd` renders a `<kbd>` element as a small key-cap chip — for naming a single key inline.

```tsx
import { Kbd, Text } from "@protocore/pds";

export default function KbdBasics() {
  return (
    <Text>
      Press <Kbd>/</Kbd> to focus the search field.
    </Text>
  );
}
```

### Combinations

Compose a chord by placing one `Kbd` per key side by side — `⌘ K`, `Ctrl Shift R`.

```tsx
import { Kbd, Text } from "@protocore/pds";

export default function KbdCombo() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <Text>
        Open the command palette with <Kbd>⌘</Kbd> <Kbd>K</Kbd>.
      </Text>
      <Text>
        Force-refresh the ledger view with <Kbd>Ctrl</Kbd> <Kbd>Shift</Kbd> <Kbd>R</Kbd>.
      </Text>
    </div>
  );
}
```

## Guidelines

**Do**

- Use one `Kbd` per physical key.
- Compose chords from adjacent caps (`⌘` `K`).
- Use the platform glyph where it's conventional (`⌘`, `⌥`, `⇧`).
- Pair shortcuts with their action in the surrounding text.

**Don't**

- Don't use `Kbd` for code literals — that is `Code`.
- Don't cram a whole chord into one cap.
- Don't invent shortcuts in docs that the UI doesn't actually bind.
- Don't use it purely decoratively for non-keyboard content.

## Accessibility

**Notes**

- Renders a semantic `<kbd>` element, which assistive tech treats as keyboard input.
- Spell out modifier names (or pair the glyph with a word) so a shortcut like `⌘K` is unambiguous when read aloud.
- It is presentational text — the actual key binding must be implemented on the interactive control it describes.

## Related

`code`, `text`, `command-palette`

---

© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/