# Status Indicator

A compact status label with a colored dot that communicates the current state of a process or resource. Supports five states and an optional pulsing animation.

```tsx demo
import { StatusIndicator } from "@tenstorrent/vesper/status-indicator";

export default function StatusIndicatorDemo() {
  return (
    <StatusIndicator
      label="In Progress"
      state="progress"
      variant="badge"
      animated
    />
  );
}
```

## Options

| Prop       | Type                                                          | Description                                                                | Default     |
| ---------- | ------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- |
| `label`    | `string`                                                      | The text label displayed next to the status dot.                           | —           |
| `state`    | `"queued" \| "progress" \| "error" \| "ready" \| "cancelled"` | The current status state, which determines the color of the indicator dot. | —           |
| `variant`  | `"default" \| "badge"`                                        | The visual style variant of the status indicator.                          | `"default"` |
| `animated` | `boolean`                                                     | When `true`, applies a pulsing animation to the status dot.                | `false`     |
| `as`       | `ElementType`                                                 | The root element type for polymorphic rendering.                           | `"div"`     |

Any additional props are forwarded to the wrapping `<div>` element, or whichever element is specified by the `as` prop.

## Examples

### Basic Usage

Render a `StatusIndicator` by giving it a `state` and a `label`:

```tsx demo
import { StatusIndicator } from "@tenstorrent/vesper/status-indicator";

export default function BasicStatusIndicator() {
  return <StatusIndicator state="queued" label="Build queued" />;
}
```

### Variants

A `StatusIndicator` can be rendered in one of two visual variants: `"default"`, or `"badge"`. The default variant is `"default"`. When rendered using the `"badge"` variant, the `StatusIndicator` receives a subtle border, visually separating it from its surrounding content:

```tsx demo
import { StatusIndicator } from "@tenstorrent/vesper/status-indicator";

export default function StatusIndicatorVariants() {
  return (
    <StatusIndicator
      label="Deployed to production"
      state="ready"
      variant="badge"
    />
  );
}
```

### States

`StatusIndicator` can be rendered with one of five states: `"queued"`, `"progress"`, `"error"`, `"ready"`, or `"cancelled"`. Use a `state` which corresponds with the status of the resource it describes.

```tsx demo
import { StatusIndicator } from "@tenstorrent/vesper/status-indicator";

export default function StatusIndicatorStates() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: "var(--vesper-spacing-2)",
      }}
    >
      <StatusIndicator label="Queued" state="queued" />
      <StatusIndicator label="In Progress" state="progress" />
      <StatusIndicator label="Ready" state="ready" />
      <StatusIndicator label="Error" state="error" />
      <StatusIndicator label="Cancelled" state="cancelled" />
    </div>
  );
}
```

### Animating the indicator dot

The colored dot next to the label can be rendered with a gentle pulsing animation by passing `animated={true}` or just `animated` as a prop:

```tsx demo
import { StatusIndicator } from "@tenstorrent/vesper/status-indicator";

export default function AnimatedStatusIndicator() {
  return <StatusIndicator label="Processing..." state="progress" animated />;
}
```