Status Dot

A small live indicator with a pulsing halo, in four tones.

All systems operational
Degraded performance
Partial outage
Maintenance scheduled

Installation#

pnpm dlx shadcn@latest add @balick/status-dot

Or pass the full URL: https://ui.balick.me/r/status-dot.json

Usage#

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

export function Status() {
  return (
    <p className="flex items-center gap-2 text-sm">
      <StatusDot />
      All systems operational
    </p>
  )
}

Props#

Prop	Type	Default	Description
`tone` Colour of the dot.	`"success" \| "warning" \| "danger" \| "neutral"`	"success"	Colour of the dot.
`pulse` Draw an expanding halo. It stops under reduced motion.	`boolean`	true	Draw an expanding halo. It stops under reduced motion.
`className` Size the dot with size-* utilities (size-2 by default).	`string`	—	Size the dot with size-* utilities (size-2 by default).