Kbd

A small chip that represents a keyboard key or shortcut, rendered as a real <kbd> element.

When to use

• To document a keyboard shortcut inline in prose or a tooltip.
• Inside menus, command palettes, and Button hints to show the key that triggers an action.

When not to use

• For arbitrary inline code or tokens — use a <code> element instead.
• As an interactive control — Kbd is presentational; wire the actual shortcut separately.

Installation

pnpm add @nordcom/nordstar-kbd

import { Kbd } from '@nordcom/nordstar';

Basic usage

Compose several keys to describe a chord.

import { Kbd } from '@nordcom/nordstar';

export default function Example() {
    return (
        <p className="flex items-center gap-2">
            Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open the command palette.
        </p>
    );
}

Sizes

md (default) sits comfortably in body text; sm fits dense rows such as menu items.

import { Kbd } from '@nordcom/nordstar';

export default function Example() {
    return (
        <div className="flex items-center gap-3">
            <Kbd size="sm">Esc</Kbd>
            <Kbd size="md">Enter</Kbd>
        </div>
    );
}

Props

Accessibility