Status dot

Free · MIT

A small status mark. Running and waiting pulse, since they are the two states a person may need to watch or act on. When one of them reaches done or failed while on screen, the new dot pops into place (too small for a drawn mark); a dot that mounts finished is still. The label is always available to assistive tech; pass showLabel to print it too.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/status-dot

Brings in: status, utils

Usage

TSX · The example above

"use client"

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

export default function Example() {
  return (
    <div className="flex flex-wrap gap-x-6 gap-y-3">
      <StatusDot status="running" showLabel />
      <StatusDot status="waiting" showLabel />
      <StatusDot status="succeeded" showLabel />
      <StatusDot status="failed" showLabel />
      <StatusDot status="queued" showLabel />
    </div>
  )
}

<StatusDot>

Prop	Type	Default	Description
statusrequired	`RunStatus`	—	Which status to show; running and waiting pulse.
showLabel	`boolean \| undefined`	false	Print the status name next to the dot.
label	`string \| undefined`	—	Words to use instead of the status name.
className	`string \| undefined`	—	Extra classes for the outer element.