Components

Badge

A compact pill for status and metadata. Five tones, one size — a badge that competes with a control for attention is a badge doing the wrong job.

Tones

Tone carries meaning, not decoration. neutral is the default and the right answer most of the time; the four coloured tones all read as state.

NeutralAccentShippedDeprecatedBreaking

tsx

import { Badge } from "dowel";

<Badge>Neutral</Badge>
<Badge tone="accent">Accent</Badge>
<Badge tone="success">Shipped</Badge>
<Badge tone="warning">Deprecated</Badge>
<Badge tone="danger">Breaking</Badge>

In context

A badge sits at 20px so it aligns to a line of body text rather than to a control. It renders a span, so it flows inline.

dowel is pre-1.0 — the API will change between minor versions.

tsx

<p>
  dowel is <Badge tone="warning">pre-1.0</Badge> — the API will
  change between minor versions.
</p>