Small semantic status signal with optional label and pulse.
StatusIndicator pairs a restrained semantic dot with a readable label. Pending state uses an outlined ring, so it is distinguishable even without color. Pulse keeps the same semantic hue and respects reduced-motion preferences.
The dot can stand alone or sit next to a label.
<HStack gap={12} wrap>
<StatusIndicator>Neutral</StatusIndicator>
<StatusIndicator status="success">Healthy</StatusIndicator>
<StatusIndicator status="warning">Delayed</StatusIndicator>
<StatusIndicator status="error">Failed</StatusIndicator>
</HStack>import { HStack, StatusIndicator } from "@froggdesign/enter-ui-react";Use pulse only for live, pending, or actively changing state.
The dot is hidden from assistive technology. Include children when status needs a text label, and do not rely on color alone for critical information.
status: neutral, success, warning, error, info, or pending.pulse adds subtle motion and respects reduced motion.className.Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.