# Kbd

> A single keyboard key or shortcut, styled like a physical key.

URL: https://apogee.avaui.dev/docs/kbd
Last updated: 2026-10-15

A single keyboard key or shortcut, styled like a physical key.

Last updated October 15, 2026

```astro
Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open the command palette.
```

## Add

```sh
npx @ava-ui/apogee add kbd
```

No Apogee dependencies.

## Usage

```astro
---
import Kbd from '@/components/apogee/Kbd/Kbd.astro'
---
Press <Kbd>Esc</Kbd> to close.
```

## API

`@composable` — exposed to Content Editors in AVA. Any other native `<kbd>` attribute passes through.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `class` | `string` | — | Extra classes, merged last. |

`Kbd` has no `variant` or `size` prop — one fixed appearance.

## States

Static: no interactive states.

## Examples

Single key:

```astro
Press <Kbd>Esc</Kbd> to close.
```

Chord (multiple keys held together):

```astro
<Kbd>⌘</Kbd> <Kbd>Shift</Kbd> <Kbd>P</Kbd>
```

## Accessibility

-   Renders the semantic `<kbd>` element — the correct HTML for representing a keyboard key.
-   Purely presentational, no ARIA needed — keep the surrounding sentence meaningful; don’t rely on the key alone to convey the shortcut’s purpose.
-   No JS.

## Tokens

| Token | Used for |
| --- | --- |
| `--border-neutral` | Key border |
| `--background-neutral-faded` | Key background fill |
| `--foreground-neutral-faded` | Key label colour |

## Do / Don’t

-   **Do** match the label to the user’s platform where relevant (`⌘` vs `Ctrl`).
-   **Do** separate chord keys with a visible `+` or space, not adjacent `Kbd`s with no gap.
-   **Don’t** put a full instruction inside one `Kbd` (“Press Enter”) — one key (or modifier) per `Kbd`.
-   **Don’t** use `Kbd` for anything that isn’t literally a keyboard key (mouse buttons, gestures).

## Content

-   Use the key’s actual glyph or name as printed on a keyboard (“Esc”, “⌘”, “Shift”) — short, no punctuation.

## Related

[

CodeInline code or a code block with build-time highlighting, line numbers, a copy button and a collapsible long view.

](https://apogee.avaui.dev/docs/code)[

CommandPaletteA ⌘K / Ctrl+K searchable command menu in a native dialog.

](https://apogee.avaui.dev/docs/command-palette)[

TooltipA short hint shown on hover and keyboard focus, anchored to its trigger in the top layer with hover intent.

](https://apogee.avaui.dev/docs/tooltip)