StatusIndicator

Visual indicator for displaying connection or service status with good, degraded, or poor states

Visual indicator for displaying connection or service status with three severity states: good, degraded, or poor.

Usage

import { StatusIndicator } from '@accelint/design-toolkit';

export function ConnectionStatus() {
  return <StatusIndicator status="good" />;
}

Reference

interface StatusIndicatorProps {
  className?: string;
  status?: 'good' | 'degraded' | 'poor';
}

Props

Prop	Type	Default	Required
`className`	`string`	-	No
`status`	`'good' \| 'degraded' \| 'poor'`	`'good'`	No

`status`

Visual state indicator:

good - Healthy status (green)
degraded - Partial functionality or warning (yellow)
poor - Critical issue or offline (red)

Examples

Example: Good status

import { StatusIndicator } from '@accelint/design-toolkit';

<StatusIndicator status="good" />

Example: Degraded status

import { StatusIndicator } from '@accelint/design-toolkit';

<StatusIndicator status="degraded" />

Example: Poor status

import { StatusIndicator } from '@accelint/design-toolkit';

<StatusIndicator status="poor" />

Example: With label text

import { StatusIndicator } from '@accelint/design-toolkit';

<div className="flex items-center gap-2">
  <StatusIndicator status="good" />
  <span>All systems operational</span>
</div>

Example: Dynamic status

import { StatusIndicator } from '@accelint/design-toolkit';

function ServiceStatus({ isOnline, hasIssues }) {
  const status = !isOnline ? 'poor' : hasIssues ? 'degraded' : 'good';
  
  return (
    <div className="flex items-center gap-2">
      <StatusIndicator status={status} />
      <span>
        {status === 'good' && 'Connected'}
        {status === 'degraded' && 'Limited connectivity'}
        {status === 'poor' && 'Disconnected'}
      </span>
    </div>
  );
}

Example: Status list

import { StatusIndicator } from '@accelint/design-toolkit';

const services = [
  { name: 'API Server', status: 'good' },
  { name: 'Database', status: 'good' },
  { name: 'Cache', status: 'degraded' },
  { name: 'Queue', status: 'poor' },
];

<ul className="space-y-2">
  {services.map(service => (
    <li key={service.name} className="flex items-center gap-2">
      <StatusIndicator status={service.status} />
      <span>{service.name}</span>
    </li>
  ))}
</ul>

Example: Inline with text

import { StatusIndicator } from '@accelint/design-toolkit';

<p className="flex items-center gap-1">
  Connection:
  <StatusIndicator status="degraded" />
  Reconnecting...
</p>

Accessibility

StatusIndicator is purely presentational. Always provide accompanying text or aria-labels for accessibility:

<div role="status" aria-label="Service status: operational">
  <StatusIndicator status="good" />
  <span aria-hidden="true">Operational</span>
</div>

Use Cases

System health dashboards - Show service or component status
Connection indicators - Display network connectivity state
Resource availability - Indicate resource health or capacity
Real-time monitoring - Visualize live system metrics

Good to know: StatusIndicator is a presentational component only. It does not include text labels or tooltips — compose it with your own text or UI elements.

Badge - Text badge with status colors
Chip - Tag component with color variants
Notice - Notification component with severity levels

StatusIndicator

On this page