Kbd, KeyCap and Keys

A shortcut as the platform prints it: ⌘K on macOS, Ctrl+K elsewhere. Kbd prints it as one chip, Keys as one cap per key, and KeyCap is a single cap.

import { Kbd, KeyCap, Keys } from '@basmilius/react-ui';

import { Kbd, KeyCap, Keys, shortcut } from '@basmilius/react-ui';

const PALETTE = shortcut('Mod+Shift+P');
const PAN = shortcut('Mod');

export default function KbdDemo() {
    return (
        <div className="flex flex-col items-center gap-4 text-xs text-text-muted">
            <p>
                Open the palette with <Kbd shortcut={PALETTE} variant="inline" />, close it with <Kbd variant="inline">Esc</Kbd>.
            </p>
            <div className="flex items-center gap-6">
                <Keys shortcut={PALETTE} />
                <Keys shortcut={PAN} then="drag" />
                <KeyCap>↑</KeyCap>
            </div>
        </div>
    );
}

Kbd

Kbd takes a Shortcut and prints it for the platform in front of the page. Without one it prints its children as they are, for a key that is no shortcut, such as Esc or ↑.

In a menu row (variant="menu", the default) the .menu-item kbd rule dresses it as the quiet hint at the end of the row. Anywhere else, such as in a sentence, a tooltip or a palette's footer, use variant="inline" for a chip on the surface it sits on.

Keys and KeyCap

A settings page that lists shortcuts prints them key by key, so a pointer gesture can stand beside them: then="drag" adds one more cap after the keys. KeyCap is one cap with a raised bottom edge.

Props

Component	Prop	Type
Kbd	shortcut	Shortcut	Printed for this platform.
	children	ReactNode	Printed as it is when there is no shortcut.
	variant	'menu' | 'inline'	Default 'menu'.
Keys	shortcut	Shortcut	Required.
	then	string	The gesture the keys go with.
KeyCap	children	ReactNode	Required.

All three take className and ref. KbdProps, KeysProps and KeyCapProps are exported types.