Badge

Compact status and category labels.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

import { Badge } from "@aspyn-io/kit";

Variants

Default

Secondary

Outline

Active

Pending

Canceled

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="destructive">Canceled</Badge>

Mapping API status to a variant

Centralize status→variant mapping so every surface renders statuses identically.

active

pending

canceled

const statusVariant = {
  active: "success",
  pending: "warning",
  canceled: "destructive",
} as const;

<Badge variant={statusVariant[subscription.status]}>
  {subscription.status}
</Badge>