COMPONENT
Badge
Small label for status, categories, and counts. 7 semantic variants.
Variants
DefaultPrimarySecondarySuccessErrorWarningInfo
<Badge variant="success">Ativo</Badge>
<Badge variant="warning" size="sm">Pendente</Badge>
<Badge variant="error">Inativo</Badge>Sizes
SmallMedium
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "default" | Color variant |
| size | "sm" | "md" | "md" | Badge size |
| children* | ReactNode | — | Badge text |
React Native
Same API on mobile. Renders as a View with pill border radius.
Mobile usage
import { Badge } from "@/components/mobile";
<Badge variant="success" size="sm">Ativo</Badge>