Badge

Ein kleines Pill-Label: 22px, 12/500. Die Bedeutung tragen Wörter.

InferenceActiveExpiringFailedSyncingPlatformNew

<div className="flex flex-wrap items-center gap-8">
      <Badge>Inference</Badge>
      <Badge tone="success">Active</Badge>
      <Badge tone="warning">Expiring</Badge>
      <Badge tone="danger">Failed</Badge>
      <Badge tone="info">Syncing</Badge>
      <Badge tone="outline">Platform</Badge>
      <Badge tone="ink">New</Badge>
    </div>

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

Props

children
ReactNode
Der Text des Badges, ein oder zwei Wörter.
tone
"neutral" | "success" | "warning" | "danger" | "info" | "outline" | "ink" = neutral
Der Status, den es kennzeichnet; immer neben Wörtern, die dasselbe sagen.