Badges label things — an engagement status, a plan tier, a notification count. They don’t trigger actions; use a Button for that.

Usage

<span class="of-badge of-badge--green">Active</span>
<span class="of-badge of-badge--amber">Paused</span>
<span class="of-badge of-badge--red">Closed</span>
<span class="of-badge of-badge--blue">Draft</span>
<span class="of-badge of-badge--default">Archived</span>

Variants

Props

Prop	Type	Default	Description
variant	'green' | 'amber' | 'red' | 'blue' | 'purple' | 'default'	'default'	Color intent
as	ElementType	'span'	Render as a different element

Guidelines

Keep badge text short — one or two words. Use color consistently: green for active/success, amber for warning/in-progress, red for error/danger, blue for informational, gray for neutral or archived states.