Status Dot

Rippling status dot for inline copy and deployment dashboards.

Installation

npx shadcn@latest add @iconiq/status-dot

File Structure

Usage

"use client";

import { StatusDot } from "@/components/ui/status-dot";

export function StatusDotPreview() {
  return (
    <p className="flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-balance text-center font-medium text-lg leading-snug dark:text-neutral-100">
      <span>Right now, production is</span>
      <StatusDot className="translate-y-px" state="READY" />
      <span>live for every region.</span>
    </p>
  );
}

Props

Props
Description

StatusDot

state

Deployment preset that maps to tone, default label, and default animation. Use this or `tone`.

Type "QUEUED" | "BUILDING" | "ERROR" | "READY" | "CANCELED"

tone

Generic presence tone when you do not need deployment vocabulary. Use this or `state`.

Type "neutral" | "active" | "success" | "warning" | "error"

showLabel

Shows visible label text beside the dot. Defaults to dot-only for inline copy.

Type boolean·Default false

label

Optional label override used for visible copy and screen reader naming.

Type string

animate

Overrides ripple animation. Defaults to active states only, such as `BUILDING` or `tone="active"`.

Type boolean

size

Scales the dot, ripple spread, and hit area together.

Type "sm" | "md" | "lg"·Default "md"

inline

Uses an inline-flex root for embedding inside sentences and compact rows.

Type boolean·Default true

className

Classes applied to the root element.

Type string

labelClassName

Classes applied to the visible label when `showLabel` is enabled.

Type string

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: none.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Right now, production isactively building on main.