Data display

StatusBadge / StatusText

Tone-based status, boxed or plain text.

@codeways/ui/status-badge

StatusBadge

A box beside a title. Brand purple is never a status colour.

neutralPartially paid

infoPartially paid

tealPartially paid

warningPartially paid

successPartially paid

dangerOverdue

mutedCancelled

no dotPaid

StatusText

Status without a box, for table rows and list items.

PaidPartially paidOverdue by 27 daysDraftVoid

Usage

import { StatusBadge, StatusText } from "@codeways/ui/status-badge";

<StatusBadge tone="warning">Partially paid</StatusBadge>
<StatusText tone="danger">Overdue by 27 days</StatusText>