Primitives
Badge
Inline status chip. 3 variants × 6 semantic colors × 2 sizes.
Preview
neutralbrandsuccesswarningerrorinfo
neutralbrandsuccesswarningerrorinfo
neutralbrandsuccesswarningerrorinfo
open to workpartialerrorsyncingidle
Installation
terminal
bash
npx @entrepta/cli@latest add badge// Resolves dependencies, copies the source, and installs npm packages automatically.
Usage
badge.tsx
tsx
import { Badge } from "@/components/entrepta/badge"
<Badge variant="solid" color="brand">FEATURED</Badge>
<Badge variant="soft" color="success" dot>open to work</Badge>
<Badge variant="outline" color="error">deprecated</Badge>
<Badge variant="soft" color="warning" dot>partial</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "solid" | "soft" | "outline" | "soft" | Fill style |
| color | "neutral" | "brand" | "success" | "warning" | "error" | "info" | "neutral" | Semantic color token |
| size | "sm" | "md" | "md" | Height and padding |
| dot | boolean | false | Renders a colored status dot before the label |