Pill

A small uppercase tag with a hairline border. Use it to show the state of a system, a connection or a task at a glance.

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

Variants

default is neutral. ok, warn and err map to the success, warning and error colors, and info uses the bright accent for transient states such as syncing.

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

export default function Variants() {
    return (
        <>
            <Pill>Idle</Pill>
            <Pill variant="ok">Online</Pill>
            <Pill variant="warn">Degraded</Pill>
            <Pill variant="err">Offline</Pill>
            <Pill variant="info">Syncing</Pill>
        </>
    );
}

Status list

Pair pills with a Label to build a compact status readout. Keep the pill text to one or two words.

import { Label, Pill } from 'jarvis-react-ui';

const SUBSYSTEMS = [
    { name: 'Repulsors', status: 'Armed', variant: 'ok' },
    { name: 'Life support', status: 'Nominal', variant: 'ok' },
    { name: 'Uplink', status: 'Lagging', variant: 'warn' },
    { name: 'Flight control', status: 'Fault', variant: 'err' },
] as const;

export default function StatusList() {
    return (
        <ul className="flex w-full max-w-[280px] flex-col gap-2">
            {SUBSYSTEMS.map((s) => (
                <li key={s.name} className="flex items-center justify-between">
                    <Label>{s.name}</Label>
                    <Pill variant={s.variant}>{s.status}</Pill>
                </li>
            ))}
        </ul>
    );
}

Accessibility

• Renders a plain <span>; it has no role and is not focusable. Native attributes (id, title, aria-*, data-*) are forwarded to it.
• The text is the only status information for screen readers. Do not rely on color alone: the word inside the pill must name the state.
• For a status that changes live and must be announced, set aria-live="polite" on the pill or wrap the readout in an element with it.

API

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