Kbd

The Kbd component renders a semantic <kbd> element for displaying keyboard keys, styled to match the shortcut hints in CommandMenu. Compose multi-key shortcuts with KbdGroup.

Import

import { Kbd, KbdGroup } from '@nim-ui/components';

Single keys

EscTabEnter↑↓

Code

<Kbd>Esc</Kbd>
<Kbd>Tab</Kbd>
<Kbd>Enter</Kbd>
<Kbd>↑</Kbd>
<Kbd>↓</Kbd>

Key combinations

Wrap keys in KbdGroup and label the whole shortcut for screen readers.

⌘KCtrlShiftP

Code

<KbdGroup aria-label="Command K">
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>
<KbdGroup aria-label="Control Shift P">
  <Kbd>Ctrl</Kbd>
  <Kbd>Shift</Kbd>
  <Kbd>P</Kbd>
</KbdGroup>

Sizes

⌘K⌘K

Code

<Kbd size="sm">K</Kbd>
<Kbd size="md">K</Kbd>

In context

Use Kbd inline in help text, tooltips, and empty states to teach operators shortcuts.

Press ⌘K to open the command menu, or Esc to dismiss this panel.

Code

<p>
  Press <KbdGroup aria-label="Command K"><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup> to open
  the command menu, or <Kbd>Esc</Kbd> to dismiss this panel.
</p>

Props

Name	Type	Default	Description
`size`	`'sm' \| 'md'`	`'sm'`	Key cap size
`className`	`string`	`-`	Additional CSS classes to apply
`children*`	`ReactNode`	`-`	Key label

KbdGroup

Name	Type	Default	Description
`aria-label`	`string`	`-`	Accessible name for the full shortcut (recommended)
`className`	`string`	`-`	Additional CSS classes to apply
`children*`	`ReactNode`	`-`	Kbd elements forming the combination

Accessibility

Renders a native <kbd> element, announced appropriately by screen readers.
Give KbdGroup an aria-label describing the whole shortcut (e.g. "Command K") so it isn't read as disjointed characters.
Displaying a shortcut doesn't implement it — pair with an actual key handler such as CommandMenu's.

Best Practices

Do

Match the OS convention of your audience (⌘ on macOS, Ctrl on Windows)
Keep key labels short — symbols or capitalized abbreviations
Use the sm size inside dense surfaces like menus and tables

Don't

Use Kbd for anything other than keyboard input (use Badge for status)
Compose combinations by concatenating text inside one Kbd — use KbdGroup

CommandMenu - Command palette with shortcut hints
Tooltip - Hover hints that can embed shortcuts

Kbd

On this page