Badge

Data display · src/components/Badge/Badge.tsx

A short piece of state on something else: a status, a count, a label.

Not a button and not a filter. It never carries an action, so if it needs to be clicked it is the wrong component.

The state is always a word, never only a colour or only the dot. A red dot on its own is invisible to anyone who cannot distinguish it from the green one.

Import

import { Badge } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
tone	'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'danger'
variant	'subtle' | 'solid' | 'outline'	subtle for a tint, solid for a filled chip, outline for a hairline.
size	'sm' | 'md'
dot	boolean	A leading dot, for a status where the word alone reads flat.
className	string
children	React.ReactNode