Components
Badge
Status badge indicators in multiple color variants, size scalings, and dot status indicators.
Badge
The Badge component displays compact status metadata, labels, counts, and live system status indicators.
Preview
Interactive
Active Status
Properties
Size
Variant
Live Code Snippet
import { Badge } from '@moul-dev/ui';
export default function Example() {
return (
<Badge>
Active Status
</Badge>
);
}Import
import { Badge } from '@moul-dev/ui';Sizes
Badge provides three standardized sizes: sm, md (default), and lg.
Small (sm)Medium (md)Large (lg)
<Badge size="sm" variant="primary">Small (sm)</Badge>
<Badge size="md" variant="primary">Medium (md)</Badge>
<Badge size="lg" variant="primary">Large (lg)</Badge>Color Variants
Choose from standard semantic color variants:
NeutralPrimarySuccessWarningError
<Badge variant="neutral">Neutral</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>Dot Status Indicators
Enable the dot prop or use variant="dot" to display a circular status indicator alongside your label:
Status DotOperationalDegradedIncidentDeploying
// Standalone status dot
<Badge variant="dot">Status Dot</Badge>
// Semantic color dots
<Badge variant="success" dot>Operational</Badge>
<Badge variant="warning" dot>Degraded</Badge>
<Badge variant="error" dot>Incident</Badge>
<Badge variant="primary" dot>Deploying</Badge>Props
Prop
Type