Status Dot

Sizes and states

Three sizes and every status.

import { StatusDot } from "@glinui/ui"
export function Demo() {
  return (

import { StatusDot } from "@glinui/ui"


export function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-x-8 gap-y-4">
      {(["sm", "md", "lg"] as const).map((size) => (
        <StatusDot key={size} size={size} status="success" label={`Size ${size}`} />
      ))}
      {(["neutral", "info", "success", "warning", "danger"] as const).map((status) => (
        <StatusDot key={status} status={status} pulse={status === "danger"} label={status} />
      ))}
    </div>
  )
}

Pulse

Enable `pulse` to add a `motion-safe:animate-pulse` animation to the dot. Useful for active or live states.

import { StatusDot } from "@glinui/ui"

export function StatusDotPulseDemo() {
  return (
    <div className="flex flex-col gap-2">
      <StatusDot status="success" label="Live" pulse />
      <StatusDot status="danger" label="Critical" pulse />
    </div>
  )
}

Sizes

import { StatusDot } from "@glinui/ui"

export function StatusDotSizeDemo() {
  return (
    <div className="flex flex-col gap-2">
      <StatusDot status="success" size="sm" label="Small" />
      <StatusDot status="success" size="md" label="Medium" />
      <StatusDot status="success" size="lg" label="Large" />
    </div>
  )
}

Dot Only

Omit the `label` prop to render a standalone colored dot, useful in compact table cells or avatar badges.

import { StatusDot } from "@glinui/ui"

export function StatusDotOnlyDemo() {
  return (
    <div className="flex items-center gap-3">
      <StatusDot status="neutral" />
      <StatusDot status="info" />
      <StatusDot status="success" />
      <StatusDot status="warning" />
      <StatusDot status="danger" />
    </div>
  )
}

With Children

Pass children instead of the `label` prop when you need richer label content. The `label` prop takes priority if both are provided.

import { StatusDot } from "@glinui/ui"

export function StatusDotChildrenDemo() {
  return (
    <StatusDot status="info">
      <span className="font-medium">Syncing</span>{" "}
      <span className="text-neutral-400">,  3 items remaining</span>
    </StatusDot>
  )
}

ARIA Attributes

• `aria-live="polite"` when representing dynamic system state

Affected properties