Anatomy

Import and assemble the component. A single Kbd renders one key; wrap several in Kbd.Group to show a sequence.

1import { Kbd } from "@raystack/apsara";
2
3<Kbd>Esc</Kbd>
4
5<Kbd.Group>
6  <Kbd>⌘</Kbd>
7  <Kbd>K</Kbd>
8</Kbd.Group>

API Reference

Both parts render a <kbd> element and forward any native attributes (id, title, aria-label, …) to it.

Root

A single keyboard key. Renders a <kbd> element.

Group

Groups multiple keyboard keys for key combinations.

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

Examples

Single keys

Use Kbd on its own for a one-key hint. Keys share a minimum width so a narrow K lines up with a wide ⌘.

1<Flex gap={5} align="center">
2  <Kbd>Esc</Kbd>
3  <Kbd aria-label="Command">⌘</Kbd>
4  <Kbd aria-label="Shift">⇧</Kbd>
5  <Kbd aria-label="Enter">↵</Kbd>
6  <Kbd>Tab</Kbd>
7</Flex>

Variants

solid is the default and suits standalone hints. Use ghost on surfaces that already have their own background, such as a menu row, a tooltip, or an input.

1<Flex gap={7} align="center">
2  <Kbd.Group>
3    <Kbd aria-label="Command">⌘</Kbd>
4    <Kbd>K</Kbd>
5  </Kbd.Group>
6  <Kbd.Group variant="ghost">
7    <Kbd aria-label="Command">⌘</Kbd>
8    <Kbd>K</Kbd>
9  </Kbd.Group>
10</Flex>

Sequences

Wrap keys in Kbd.Group to show a chord. Setting variant on the group applies it to every key inside.

1<Flex gap={7} align="center">
2  <Kbd.Group>
3    <Kbd aria-label="Command">⌘</Kbd>
4    <Kbd>K</Kbd>
5  </Kbd.Group>
6  <Kbd.Group>
7    <Kbd aria-label="Command">⌘</Kbd>
8    <Kbd aria-label="Shift">⇧</Kbd>
9    <Kbd>P</Kbd>
10  </Kbd.Group>
11</Flex>

Separators

Kbd.Group renders whatever you put between the keys, so separators are plain text. Use + for keys pressed together and a word like then for keys pressed in order. Separator text takes the surrounding typography rather than the key styling.

1<Kbd.Group>
2  <Kbd aria-label="Command">⌘</Kbd>+<Kbd>K</Kbd>
3</Kbd.Group>

Inline with text

Keys sit on the text baseline, so they can be dropped straight into a sentence.

1<Text size="small" variant="secondary">
2  Press{" "}
3  <Kbd.Group>
4    <Kbd aria-label="Command">⌘</Kbd>
5    <Kbd>K</Kbd>
6  </Kbd.Group>{" "}
7  to open the command palette.
8</Text>

In an input

Surface a focus shortcut in a search field. Use a single ghost key here — the input's trailing slot is sized for an icon, so a multi-key Kbd.Group will be clipped.

1<Input
2  placeholder="Search projects"
3  trailingIcon={
4    <Kbd variant="ghost" aria-label="Command K">
5      ⌘K
6    </Kbd>
7  }
8/>

In a tooltip

A common use is surfacing a shortcut alongside the action it triggers.

1<Tooltip>
2  <Tooltip.Trigger render={<Button variant="outline" />}>
3    Search
4  </Tooltip.Trigger>
5  <Tooltip.Content>
6    <Flex gap={3} align="center">
7      Open search
8      <Kbd.Group variant="ghost">
9        <Kbd aria-label="Command">⌘</Kbd>
10        <Kbd>K</Kbd>
11      </Kbd.Group>
12    </Flex>
13  </Tooltip.Content>
14</Tooltip>

Accessibility

• Kbd is presentational and renders the semantic <kbd> element. It has no ARIA role of its own and is not exposed as a separate accessible object, so it does not change how surrounding content is announced.
• Symbol-only keys such as ⌘, ⇧, or ↵ are not announced usefully on their own — they are read by their Unicode names, if at all. Add an aria-label when the symbol is the only cue: <Kbd aria-label="Command">⌘</Kbd>.
• Keys are not focusable and carry no interaction. Keep the shortcut wired to a real handler elsewhere — Kbd only displays it.
• Keys ignore pointer events and text selection, so clicking or dragging across a menu row does not highlight the key labels.