Component

Badge

Small status chip. Tinted by default, solid for emphasis.

Badge rendered on iOS, dark mode — iPhone, zinc preset. Captured from the example app.

npx @eoria/cli add badge

Usage

import { Badge } from '@/components/ui/badge'

<Badge>Pro</Badge>
<Badge variant="solid">New</Badge>
<Badge variant="secondary" size="md">Draft</Badge>

Variants

Prop	Values	Default
`variant`	`default` (accent tint), `solid`, `secondary`, `outline`, `destructive`	`default`
`size`	`sm`, `md`	`sm`

String children render through the label slot. Anything else renders as is.

Source

registry/ui/badge.tsx