StatusIndicator

Animated status label with pulsing text and spinning icon — the heartbeat of your AI interface. Shows what the model is doing right now.

StatusIndicator — All States

Thinking...

StatusIndicator — Lifecycle Simulation

Ready

Cycles: idle → thinking → tool-calling → streaming → idle

StatusIndicator — Custom Labels & Colors

Mulling...Reasoning...Generating...Searching...Rate limited

Import

tsx

import { StatusIndicator } from "@arc-lo/ui";

Basic usage

tsx

<StatusIndicator state="thinking" />
<StatusIndicator state="streaming" />
<StatusIndicator state="tool-calling" />
<StatusIndicator state="idle" />
<StatusIndicator state="error" />

Custom labels and colors

tsx

<StatusIndicator
  state="thinking"
  label="Mulling..."
  color="amber"
/>

<StatusIndicator
  state="thinking"
  label="Searching..."
  color="blue"
  icon={<SearchIcon />}
/>

With response lifecycle

tsx

function ChatStatus({ responseState }) {
  const statusMap = {
    waiting: "idle",
    thinking: "thinking",
    calling_tools: "tool-calling",
    generating: "streaming",
    done: "idle",
    failed: "error",
  };

  return (
    <StatusIndicator state={statusMap[responseState]} />
  );
}

Props

Prop	Type	Default	Description
`state`	`"idle" \| "thinking" \| "streaming" \| "tool-calling" \| "error"`	`"idle"`	Current AI state
`label`	`string`	—	Override default label
`icon`	`ReactNode`	—	Custom icon element
`color`	`"purple" \| "amber" \| "blue" \| "red" \| "gray"`	—	Override color scheme

States

State	Default label	Color	Animation
`idle`	Ready	Gray	None
`thinking`	Thinking...	Amber	Pulse + spin
`streaming`	Writing...	Purple	Pulse + spin
`tool-calling`	Using tools...	Blue	Pulse + spin
`error`	Error	Red	None