StatusBadge

A small connection indicator: a colored dot followed by an uppercase label. Put it in a TopBar or a panel header to show whether a link or service is up.

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

States

state sets the dot color. The label is free text; without one the badge reads LINK · SECURE.

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

export default function States() {
    return (
        <>
            <StatusBadge state="online" label="Link · secure" />
            <StatusBadge state="warn" label="Degraded" />
            <StatusBadge state="offline" label="Offline" />
        </>
    );
}

Pulse

While state is online, the dot pulses by default: it fades and shrinks slightly about once a second. Set pulse={false} for a steady dot. warn and offline never pulse, and the pulse stops for users who prefer reduced motion.

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

export default function Pulse() {
    return (
        <>
            <StatusBadge label="Pulsing" />
            <StatusBadge label="Steady" pulse={false} />
        </>
    );
}

Live connection

Drive state and label from your connection status. This demo cycles through the states on a timer.

import { useEffect, useState } from 'react';
import { BrandMark, StatusBadge, TopBar } from 'jarvis-react-ui';
import type { StatusBadgeState } from 'jarvis-react-ui';

const CYCLE: StatusBadgeState[] = ['online', 'warn', 'offline'];

const LABELS: Record<StatusBadgeState, string> = {
    online: 'Link · secure',
    warn: 'Link · unstable',
    offline: 'Link · lost',
};

export default function LiveConnection() {
    const [index, setIndex] = useState(0);
    const state = CYCLE[index % CYCLE.length] ?? 'online';

    useEffect(() => {
        const id = setInterval(() => setIndex((i) => i + 1), 2000);
        return () => clearInterval(id);
    }, []);

    return (
        <TopBar
            position="static"
            left={<BrandMark />}
            right={<StatusBadge state={state} label={LABELS[state]} />}
        />
    );
}

Accessibility

• The badge is plain text in a <span>. The state is only conveyed by the dot color, so make the label say it too (Link · lost, not just Link).
• It is not a live region, so changes are not announced. If screen reader users need to know when the connection drops, also announce it, for example with a Toast.
• The pulse animation is switched off under prefers-reduced-motion.

API