Components

Badge

Compact status and metadata in five restrained tones.

Tones

Use neutral by default. Add a tone and dot when the state needs to scan quickly in a dense list.

NeutralBetaShippedDeprecatedBreaking

tsx

import { Badge } from "@karnstack/dowel";

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

In context

A badge sits at 22px 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>