1<Kbd.Group>
2  <Kbd>⌘</Kbd>
3  <Kbd>K</Kbd>
4</Kbd.Group>

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

Spaces a sequence of keys evenly. Also renders a <kbd>: per the HTML spec, a kbd nested inside a kbd represents an individual key within a larger input, which is exactly what a shortcut sequence is.

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>⌘</Kbd>
4  <Kbd>⇧</Kbd>
5  <Kbd>↵</Kbd>
6  <Kbd>Tab</Kbd>
7</Flex>

Sequences

Wrap keys in Kbd.Group to show a chord.

1<Flex gap={7} align="center">
2  <Kbd.Group>
3    <Kbd>⌘</Kbd>
4    <Kbd>K</Kbd>
5  </Kbd.Group>
6  <Kbd.Group>
7    <Kbd>⌘</Kbd>
8    <Kbd>⇧</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.

1<Kbd.Group>
2  <Kbd>⌘</Kbd>+<Kbd>K</Kbd>
3</Kbd.Group>

Inline with text

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

1<Flex gap={3} align="center">
2  <Text size="small" variant="secondary">
3    Press
4  </Text>
5  <Kbd.Group>
6    <Kbd>⌘</Kbd>
7    <Kbd>K</Kbd>
8  </Kbd.Group>
9  <Text size="small" variant="secondary">
10    to open the command palette
11  </Text>
12</Flex>

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>
9        <Kbd>⌘</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, which screen readers announce as keyboard input.
• Symbol-only keys such as ⌘, ⇧, or ↵ are not announced usefully on their own. 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.
• Text selection is disabled so dragging across a menu row does not highlight the key labels.