Kbd

A keyboard key chip. Use it to show shortcuts in hints, menus, tooltips and docs. It renders a semantic <kbd> element.

import { Kbd } from 'jarvis-react-ui';

Shortcuts

Use one Kbd per key for combinations, or a single one with the whole combo (<Kbd>Ctrl K</Kbd>).

import { Kbd } from 'jarvis-react-ui';

export default function Shortcuts() {
    return (
        <dl className="m-0 grid grid-cols-[auto_1fr] items-center gap-x-6 gap-y-2 text-[11px] text-text-secondary">
            <dt className="flex gap-1">
                <Kbd>Ctrl</Kbd>
                <Kbd>K</Kbd>
            </dt>
            <dd className="m-0">Search the docs</dd>
            <dt className="flex gap-1">
                <Kbd>Space</Kbd>
            </dt>
            <dd className="m-0">Push to talk</dd>
            <dt className="flex gap-1">
                <Kbd>Esc</Kbd>
            </dt>
            <dd className="m-0">Close dialog</dd>
        </dl>
    );
}

Sizes

sm (default) fits inline text and inputs; md suits headings and larger hints.

import { Kbd } from 'jarvis-react-ui';

export default function Sizes() {
    return (
        <>
            <Kbd>Ctrl K</Kbd>
            <Kbd size="md">Ctrl K</Kbd>
        </>
    );
}

Kbd also works as an end adornment of Input, as the search field of this site does.

Accessibility

The <kbd> element tells assistive technology that the text is keyboard input. Write key names as words (Ctrl, Esc) rather than symbols only, and give platform variants (Ctrl / ⌘) where they differ.

API

Also accepts inherited props from HTMLAttributes (54), AriaAttributes (53), DOMAttributes (169), RefAttributes (1), Attributes (1).