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.

In Progress

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:

Build queued

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:

Deployed to production

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.

Queued

In Progress

Ready

Error

Cancelled

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:

Processing...

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

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