StatusIndicator

Visual status dots with animation

StatusIndicator displays a colored dot indicating the current status of an operation. Supports pending (animated), success, and failed states in multiple sizes.

Preview

Status Variants

Pending

Animated pulse effect

Success

Solid green indicator

Failed

Solid red indicator

Size Variants

Import

import

import { StatusIndicator } from '@ash-cloud/ash-ui';

Usage

TaskStatus.tsx

import { StatusIndicator } from '@ash-cloud/ash-ui';

function TaskStatus({ task }) {
  return (
    <div className="flex items-center gap-2">
      <StatusIndicator status={task.status} size="md" />
      <span>{task.name}</span>
    </div>
  );
}

Props

Prop	Type	Default	Description
status	'pending' \| 'success' \| 'failed'	required	The status to display
size	'sm' \| 'md' \| 'lg'	'md'	Size of the indicator dot
className	string	undefined	Additional CSS classes

Status Colors

pending

Yellow with pulse animation

success

Solid green

failed

Solid red

Related Components

ToolCallCard

Uses StatusIndicator for tool status

LoadingIndicator

Animated loading states