StatusIndicator

StatusIndicator gives product surfaces a compact state marker without turning status into decoration.

#Default usage

<div className="docs-preview-row">
  <StatusIndicator>Neutral</StatusIndicator>
  <StatusIndicator status="success">Healthy</StatusIndicator>
  <StatusIndicator status="warning">Delayed</StatusIndicator>
  <StatusIndicator status="error">Failed</StatusIndicator>
</div>

#Import

import { StatusIndicator } from "@froggdesign/enter-ui-react";

#Variants

#Accessibility

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.

#API

• status: neutral, success, warning, error, info, or pending.
• pulse adds subtle motion and respects reduced motion.
• Supports native span props and className.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.