StatusIndicator

Feedback

A compact status dot paired with a visible text label.

Four semantic statesLive pulsing connectionStatic default

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

status-indicator.tsx

"use client";

import { StatusIndicator } from "@/components/ui/status-indicator";
export default function StatusIndicatorExample() {
  return (
    <div className="w-full max-w-md space-y-6">
      <div className="divide-y rounded-xl border bg-card">
        {[
          {
            name: "Production API",
            state: "Operational",
            tone: "success" as const,
          },
          {
            name: "Background jobs",
            state: "Delayed",
            tone: "warning" as const,
          },
          {
            name: "Legacy webhook",
            state: "Unavailable",
            tone: "danger" as const,
          },
          {
            name: "Sandbox",
            state: "Not configured",
            tone: "neutral" as const,
          },
        ].map((item) => (
          <div
            key={item.name}
            className="flex flex-wrap items-center justify-between gap-3 p-4"
          >
            <span className="text-sm font-medium">{item.name}</span>
            <StatusIndicator tone={item.tone}>{item.state}</StatusIndicator>
          </div>
        ))}
      </div>
      <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg bg-muted/40 p-4">
        <span className="text-xs text-muted-foreground">LIVE SESSION</span>
        <StatusIndicator tone="success" pulse>
          Connected
        </StatusIndicator>
      </div>
      <p className="text-xs text-muted-foreground">
        Every color is paired with a visible status label.
      </p>
    </div>
  );
}

Usage

Use short labels to communicate service health, presence, or availability next to an entity. Choose a semantic tone and always provide readable children. Optional pulse emphasizes a live state; static is the default. Apply role=status at the call site only when updates should be announced, rather than making every static status a live region.

Import

import { StatusIndicator } from "@/components/ui/status-indicator";

Shipped as editable source in src/components/ui/status-indicator.tsx in both apps. Copy the implementation below when moving it to another project. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

Component source

The complete implementation is included in both apps. It uses the React, Radix, Lucide, and shared-core dependencies already installed in Apex. Keep your project’s semantic theme tokens when reusing it.

src/components/ui/status-indicator.tsx

import type { ComponentProps } from "react";
import { cn } from "@dashboardpack/core/lib/utils";
export interface StatusIndicatorProps extends ComponentProps<"span"> {
  tone?: "success" | "warning" | "danger" | "neutral";
  pulse?: boolean;
}
export function StatusIndicator({
  tone = "neutral",
  pulse = false,
  className,
  children,
  ...props
}: StatusIndicatorProps) {
  return (
    <span
      {...props}
      className={cn("inline-flex items-center gap-2 text-sm", className)}
    >
      <span
        aria-hidden
        className={cn(
          "size-2 shrink-0 rounded-full",
          tone === "success"
            ? "bg-success"
            : tone === "warning"
              ? "bg-warning"
              : tone === "danger"
                ? "bg-destructive"
                : "bg-muted-foreground",
          pulse && "animate-pulse motion-reduce:animate-none",
        )}
      />
      {children}
    </span>
  );
}

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

StatusIndicator props
Prop	Type / Default	Description
children	`ReactNode` Default: required for meaningful use	Visible text describing the status.
tone	`success \| warning \| danger \| neutral` Default: neutral	Semantic dot color.
pulse	`boolean` Default: false	Optional reduced-motion-aware emphasis.
...props	`span attributes` Default: —	Ordinary span semantics, including an optional live status role.
className	`string` Default: —	Extend the component container with theme-aware utility classes.

Build with these too

Badge Tracking Spinner