ComponentsFree
Badge
Small status or count indicators
Badge
Badges are useful for labels, statuses, or counts.
Props
- children: ReactNode
- variant: 'default' | 'success' | 'warning' | 'danger'
Example
import { Badge } from "components/ui/badge";
function Demo() {
return (
<div>
<Badge>Default</Badge>
<Badge variant="success">Live</Badge>
<Badge variant="warning">Beta</Badge>
<Badge variant="danger">Error</Badge>
</div>
);
}Notes
- Keep badges short (1–2 words) and use color consistently for meaning.