Component
Badge
Displays compact status or metadata.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/badgeExamples
Live previews render through the docs app's PandaCSS codegen.
<Badge>Published</Badge>
<Badge variant="solid" tone="success"> Live </Badge>
<Badge variant="outline" tone="danger" size="sm" radius="sm"> Error </Badge>
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `radius` | `BadgeRadius` | No | - | Border radius. Defaults to \`full\` (pill). |
| `size` | `BadgeSize` | No | - | - |
| `tone` | `BadgeTone` | No | - | Selects the semantic color palette used by the badge. Defaults to \`accent\`. |
| `variant` | `BadgeVariant` | No | - | - |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
| Variant | Values |
|---|---|
| `variant` | `solid`, `subtle`, `outline` |
| `size` | `sm`, `md` |
| `radius` | `none`, `sm`, `md`, `lg`, `full` |
Registry
Files this component contributes to your registry install.
- Manifest: `/r/badge.json`
- Recipe: `badge`
- Files: `src/components/ui/badge.tsx`