StatusDot

Ein 8px-Punkt in Statusfarbe mit seinem Wort. Status ist nie nur Farbe.

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
Das Wort, das die Bedeutung trägt.
size
"md" | "sm" = md
Die Größe des Punkts.
tone
"neutral" | "success" | "warning" | "danger" | "info" = neutral
Der Status, den der Punkt markiert; ihn neben Wörtern halten, die dasselbe sagen.