Badge

A small pill label: 22px, 12/500. Words carry the meaning.

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
The badge's text, one or two words.
tone
"neutral" | "success" | "warning" | "danger" | "info" | "outline" | "ink" = neutral
The status it marks; keep it next to words that say the same.