Components / Badge
Badge
Static semantic status label — display only, no interaction. For clickable / removable / selectable pills, use cg-chip. For toolbar press-state buttons, use cg-toggle.
data-displayv0.1.0
Playground
Examples
Variants
<cg-stack direction="row" gap="sm"><cg-badge variant="neutral" label="Neutral"></cg-badge><cg-badge variant="info" label="Info"></cg-badge><cg-badge variant="success" label="Success"></cg-badge><cg-badge variant="warning" label="Warning"></cg-badge><cg-badge variant="danger" label="Danger"></cg-badge><cg-badge variant="accent" label="Accent"></cg-badge></cg-stack>Sizes
<cg-stack direction="row" gap="sm" align="center"><cg-badge size="sm" label="Small"></cg-badge><cg-badge size="md" label="Medium"></cg-badge><cg-badge size="lg" label="Large"></cg-badge></cg-stack>With dot indicator
<cg-stack direction="row" gap="sm"><cg-badge variant="success" label="Active" dot></cg-badge><cg-badge variant="danger" label="Error"></cg-badge><cg-badge variant="info" label="Online" dot></cg-badge></cg-stack>Import
import { CgBadge } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-badge';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "neutral" | "info" | "success" | "warning" | "danger" | "accent" | "neutral" | Color variant |
size | "sm" | "md" | "lg" | "md" | Badge size |
label | string | "" | Badge text content |
dot | boolean | false | Show animated pulsing dot indicator |
rounded | "none" | "sm" | "md" | "lg" | "full" | "md" | Border radius variant |