@agala-labs/ui

Badge

Reports compact, passive status, counts, or metadata.

Examples

Default

Default 12 items New Draft Active Pending Failed

<AgalaBadge variant="success" dot>Active</AgalaBadge>

Import

import { AgalaBadge } from '@agala-labs/ui'

API

Prop	Type	Default	Description
variant	'default' | 'secondary' | 'outline' | 'subtle' | 'success' | 'warning' | 'danger'	'default'	Visual/semantic treatment.
size	'sm' | 'md'	'md'	Badge size.
dot	boolean	false	Shows a status dot.
color	string	—	Custom color override.
class	string	—	Consumer override class.

Slots

• default — badge label

Accessibility

Badge is always passive and never enters the tab order. Do not communicate status through color or a dot alone; keep the slot label meaningful.