Source: https://monarchui.dev/components/kbd/

Components · Typography

# Kbd

Keyboard shortcut hint.

@rookcom/monarch-react

Component

## Shortcut

## Usage examples

The example at the top of the page is the only one for this component.

## Purpose

Shows a keyboard key or shortcut, e.g. ⌘K.

### Use when

- Hinting a shortcut in a menu, tooltip or help text.

## Design principles

- Semantic: renders a native `<kbd>` element.

## API reference

```tsx
import { Kbd } from '@rookcom/monarch-react';
```

| Export | Kind | Rendering | Root class |
| --- | --- | --- | --- |
| `Kbd` | component | server-safe | `.mn-kbd` |

Native `<kbd>` attributes pass through.

Generated from the TypeScript declarations of `packages/react/src/components/typography/kbd`.

## Properties

### `Kbd`

A keyboard key or shortcut, e.g. <Kbd>⌘K</Kbd>.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `id` | `string` |  |

## Variants

Kbd has no variants.

## States

No states: it renders static content.

## Interaction behaviour

Not interactive.

## Keyboard support

Not interactive; it only displays a key.

## Accessibility

- Screen readers read the key text; spell out symbols nearby if they are not obvious.

## Responsive behaviour

- Inline element; no breakpoints.

## Theme support

- Border, surface and text use Monarch semantic tokens.

## Do and don't

### Do

- Use one Kbd per key in a combination.

### Don't

- Do not use Kbd for code snippets; use `<code>`.

## Related components

- [DropdownMenu](https://monarchui.dev/components/dropdown-menu/): Menu items show shortcuts with `shortcut`.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | None |
| Monarch components | None |

## Testing coverage

- Renders a `<kbd>` element.

| Check | Covered |
| --- | --- |
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | Visual baselines: /__gallery |

Tests: `packages/react/src/components/typography/kbd`

## All example code

### Shortcut

```tsx
import { Kbd } from '@rookcom/monarch-react';

<Kbd>⌘</Kbd> <Kbd>K</Kbd>
```