Skip to main content
MACAW

Badge

Atombeta@macaw-ds/ui · since 0.1.0

A short, non-interactive status label such as Paid, Overdue or Draft. Not a button, not a counter.

Open gallery

Status labels for records and rows. Six tones map to the status colour tokens; three variants trade emphasis for density. The text carries the meaning so colour is never the only signal.

Playground

Controls are generated from the manifest; the snippet is what the CLI prints. Show focus and Reduced motion appear only when they apply.

Frame theme
Paid
Examples
import { Badge } from '@macaw-ds/ui';

<Badge>Paid</Badge>

Controls

Meaning. success for settled or active, warning for pending or attention, critical for failed or overdue, info for informational, accent for highlighted, neutral for draft or archived.

variant

Emphasis. soft (tinted) is the default in tables; solid for a single prominent status on a detail page; outline for the quietest option.

size

20 or 24 px tall. sm inside dense table rows.

Leading dot in the tone colour, for live or state indicators.

The status word or two.

Examples

The named exports of the examples file, rendered as they ship.

  • Default
    Paid
  • Sizes
    PendingPending
  • Tones
    DraftPaidPendingOverdueRefundedFeatured
  • Variants
    DraftPaidPendingOverdueRefundedFeatured
    DraftPaidPendingOverdueRefundedFeatured
    DraftPaidPendingOverdueRefundedFeatured
  • With dot
    ActivePausedFailing