Badge

Status pill in the four status token pairs. Single fixed size by design — its height derives from the text metrics.

Previewlive — edit controls below

Paid

Content

Text

Appearance

variant

Basic

import { Badge } from "@loom/muslin-react";

<Badge variant="success">Paid</Badge>

Status variants

All four status pairs side by side.

import { Badge } from "@loom/muslin-react";

<div className="flex gap-2">
  <Badge variant="neutral">Draft</Badge>
  <Badge variant="success">Paid</Badge>
  <Badge variant="warning">Pending</Badge>
  <Badge variant="danger">Overdue</Badge>
</div>

Inside a table cell

Map row state to a badge variant.

import { Badge, Table } from "@loom/muslin-react";

<Table.Cell>
  <Badge variant={row.paid ? "success" : "warning"}>
    {row.paid ? "Paid" : "Pending"}
  </Badge>
</Table.Cell>