Skip to content
zedkit
@zedtech/zedkit-ui

StatusDot

A small status dot with semantic tones (active, idle, success, warning, danger).

Stable@zedtech/zedkit-ui

Wraps: (none)

Syncing…

Idle

Saved

Retrying…

Failed

View props table
Who is it for?
Developers showing compact live state (lists, headers, realtime panels).
When should I use it?
Beside a label that names the state (the dot is decorative).
When should I pick something else?
As the only state signal — pair it with text, never color alone.

Use it

Examples import from the package. With copied source, import from @/components/ui/status-dot instead.

Single tone
import { StatusDot } from "@zedtech/zedkit-ui";
<StatusDot tone="active" /> // active | idle | success | warning | danger; decorative, pair with text

All tones with labels

Checkout: Operational

Search: Retrying…

Payments: Failed

Image resizing: Idle

Order export: Running

import { StatusDot } from "@zedtech/zedkit-ui";
<StatusDot tone="success" /> // Saved
<StatusDot tone="warning" /> // Retrying…
<StatusDot tone="danger" /> // Failed

Static ping override

Live sync (pulses)

Live sync, static (printed report or dense table)

import { StatusDot } from "@zedtech/zedkit-ui";
<StatusDot tone="active" pulse={false} /> // static dot, no ping

Kit not installed yet?

You get
Every component from one import, with the theme tokens included. Updates arrive with your package manager.
You need
  • React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

  1. Install

    Terminal
    pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

  2. Load the styles

    Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

    src/app/globals.cssReplace the contents
    @import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

  3. Pick a look

    Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

    src/app/layout.tsxReplace the contents
    import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

  4. Load the fonts

    The Glass look uses Inter and Space Grotesk; these imports self-host them.

    src/app/fonts.tsCreate the file
    import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";

  5. Import and render

    src/app/page.tsxReplace the contents
    import { StatusDot } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <StatusDot tone="active" /> // active | idle | success | warning | danger; decorative, pair with text
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Accessibility

aria-hidden by design — the paired text carries the meaning. Size is size-status-dot. Tones map to semantic color tokens.

Troubleshooting

Dot invisible — the paired text must carry the state (never color alone). Pinging when it should not — ongoing tones (`active`, `warning`, `danger`) ping by default; pass `pulse={false}`.

Skeleton

Animated placeholder blocks that hold layout while data loads.

ProgressBar

An accessible progressbar with clamped value and label.

On this page

PreviewGuidanceUse itKit not installed yet?PropsAccessibilityRelatedTroubleshooting