Kbd

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

Last updated October 15, 2026

Press ⌘ K to open the command palette.

Show code

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

Add

npx @ava-ui/apogee add kbd

No Apogee dependencies.

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

@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.

Static: no interactive states.

Single key:

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

Chord (multiple keys held together):

⌘ShiftP

Show code

<Kbd>⌘</Kbd> <Kbd>Shift</Kbd> <Kbd>P</Kbd>

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.

Do match the label to the user’s platform where relevant (⌘ vs Ctrl).
Do separate chord keys with a visible + or space, not adjacent Kbds 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).

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