Hint

A muted line of text that tells the user about a keyboard shortcut. Hint.Key renders a single key chip and also works on its own, for example inside an Input.

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

Inline

position="inline" keeps the hint in the document flow. Mix text and Hint.Key chips freely.

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

export default function Inline() {
    return (
        <Hint position="inline">
            Push to talk · <Hint.Key>Space</Hint.Key> · Mute · <Hint.Key>Ctrl+.</Hint.Key>
        </Hint>
    );
}

Fixed in the corner

The default position="fixed-br" pins the hint 16px from the bottom-right corner of the viewport, above the page content, via the lib-hint--fixed-br modifier class. Render it once per screen for the most important shortcut.

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

export default function Fixed() {
    return (
        <Hint>
            Command palette · <Hint.Key>Ctrl K</Hint.Key>
        </Hint>
    );
}

A fixed hint escapes to the viewport. To keep it inside a preview container, give the container relative overflow-hidden transform-gpu and an explicit height.

Key chips

Hint.Key renders a small Kbd chip (a <kbd> in a hairline frame with the accent color) with spacing for running text. Use it anywhere a shortcut is mentioned, such as the end adornment of an input; for other sizes use Kbd directly.

import { Search } from 'lucide-react';
import { Hint, Input } from 'jarvis-react-ui';

export default function KeyChip() {
    return (
        <Input
            aria-label="Search systems"
            placeholder="Search systems…"
            startAdornment={<Search size={12} aria-hidden="true" />}
            endAdornment={<Hint.Key>/</Hint.Key>}
        />
    );
}

Hint.Key props

The position union is exported as the HintPosition type.

Accessibility

• Hint is a plain <div> with no role; Hint.Key is a native <kbd>, which marks keyboard input for assistive technology.
• The hint only describes a shortcut; the shortcut itself must be implemented by your app.
• The text is uppercase by CSS. Write key names in normal case (Ctrl K), so they are read as words.

API