# Kbd

A semantic keycap for keyboard shortcuts and individual key names.

Use Kbd to supplement a visible command with its keyboard shortcut. Do not use it as the only label for an action or to imply that an unavailable shortcut works.

```tsx
"use client";

import { Kbd } from "@patchui/react";

export function KbdDemo() {
  return (
    <div className="flex flex-wrap items-center gap-6 text-small text-ink">
      <span className="inline-flex items-center gap-2">
        Search
        <Kbd meta>K</Kbd>
      </span>
      <span className="inline-flex items-center gap-2">
        Save
        <Kbd meta shift>S</Kbd>
      </span>
      <span className="inline-flex items-center gap-2">
        Cancel
        <Kbd size="sm">Esc</Kbd>
      </span>
    </div>
  );
}

```

## Installation

```bash
npx shadcn add @patchui/kbd
```

The copied source is available in the [registry JSON](https://ui.hotfix.jobs/r/kbd.json). The canonical implementation lives in [packages/react/src/components/kbd.tsx](https://github.com/hotfix-jobs/patch-ui/blob/main/packages/react/src/components/kbd.tsx).

## Usage

```tsx
<span className="inline-flex items-center gap-2">
  Search
  <Kbd meta>K</Kbd>
</span>
```

Modifier props render platform-appropriate labels. `meta` displays Command on Apple platforms and Ctrl elsewhere, while `alt` displays Option on Apple platforms and Alt elsewhere.

Static Kbd renders a semantic `<kbd>` element. Passing `onClick` renders a native `<button type="button">` with hover and keyboard-focus states. Prefer a regular Button for primary actions.

## API reference

| Prop    | Type            | Default | Description                                    |
| ------- | --------------- | ------- | ---------------------------------------------- |
| size    | "sm" \| "md"    | "md"    | Sets the compact inline or shortcut-hint size. |
| meta    | boolean         | false   | Adds the platform Meta modifier.               |
| ctrl    | boolean         | false   | Adds the platform Control modifier.            |
| alt     | boolean         | false   | Adds the platform Alt or Option modifier.      |
| shift   | boolean         | false   | Adds the Shift modifier.                       |
| onClick | (event) => void | -       | Makes the keycap an operable button.           |

Kbd also accepts native attributes for the element it renders.

## Accessibility

* Pair shortcuts with a visible action label so people do not have to infer a command from symbols alone.
* Only show shortcuts that are currently available in the interface.
* Static keycaps are not focusable. Interactive keycaps use native button keyboard behavior.
* Interactive keycaps keep their compact visual geometry while exposing a 24 pixel pointer floor and a 44 pixel coarse-pointer target. Use Button when the action needs stronger visual emphasis.
* Treat platform-specific modifier text as a display aid, not as the implementation of the shortcut itself.