Components / Status

LiveDot

Pulsing status dot. halo adds the soft ring used next to live data sources on the marketing site; pulse={false} holds it still for a status that isn't live.

Extracted fromMarketing siteExplorer

Import

tsx
import { LiveDot } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { LiveDot } from "@somnia-chain/ui/next"

Examples

Tones

Operational Degraded Down Live source
examples/live-dot/default.tsxShow code
tsx
import { LiveDot } from "@somnia-chain/ui"

export default function LiveDots() {
  return (
    <div className="flex flex-wrap items-center gap-6 font-mono text-[12px] text-fg-2">
      <span className="inline-flex items-center gap-2">
        <LiveDot /> Operational
      </span>
      <span className="inline-flex items-center gap-2">
        <LiveDot tone="warn" /> Degraded
      </span>
      <span className="inline-flex items-center gap-2">
        <LiveDot tone="down" /> Down
      </span>
      <span className="inline-flex items-center gap-2">
        <LiveDot tone="live" halo /> Live source
      </span>
    </div>
  )
}

Static and labelled

Beside a word, a dot is hidden from screen readers. On its own, give it an aria-label and it is read as an image with that name.

Queued StoppedRun 1842
examples/live-dot/static.tsxShow code
tsx
import { LiveDot } from "@somnia-chain/ui"

export default function LiveDotStatic() {
  return (
    <div className="flex flex-wrap items-center gap-6 font-mono text-[12px] text-fg-2">
      <span className="inline-flex items-center gap-2">
        <LiveDot tone="accent" pulse={false} /> Queued
      </span>
      <span className="inline-flex items-center gap-2">
        <LiveDot tone="down" pulse={false} /> Stopped
      </span>
      <span className="inline-flex items-center gap-2">
        Run 1842 <LiveDot tone="warn" aria-label="Running" />
      </span>
    </div>
  )
}

Props

LiveDot

PropTypeDefaultDescription
tone"up" | "warn" | "down" | "accent" | "live""up"Color.
halobooleanfalseRing behind the dot.
size"sm" | "md"md with a halo, else sm6px or 8px.
pulsebooleantrueFades in and out. false is a static dot.
...props<span> attributes—Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <span>. An aria-label or aria-labelledby makes the dot an image with that name; without one it is aria-hidden.