StatusDot

An 8px semantic dot with its word. Status is never color alone.

ActiveExpiringDownSyncingArchivedLive

<div className="flex flex-col gap-8">
      <StatusDot tone="success">Active</StatusDot>
      <StatusDot tone="warning">Expiring</StatusDot>
      <StatusDot tone="danger">Down</StatusDot>
      <StatusDot tone="info">Syncing</StatusDot>
      <StatusDot tone="neutral">Archived</StatusDot>
      <StatusDot tone="success">Live</StatusDot>
    </div>

import { StatusDot } from "@logicplanes/kaeso-ui";

Props

children
ReactNode
The word that carries the meaning.
size
"md" | "sm" = md
The dot's size.
tone
"neutral" | "success" | "warning" | "danger" | "info" = neutral
The status the dot marks; keep it next to words that say the same.