Primitives

Badge

Pill 22px tall. Five variants. Optional leading dot. In variant C: square, uppercase, tracked.

installnpx shadcn@latest add https://br-design-system2.vercel.app/r/br-primitives.json

Preview

DefaultNewFeaturedProOnlinePending
import { Badge } from "@/components/br/primitives";

<Badge>Default</Badge>
<Badge variant="accent">New</Badge>
<Badge variant="solid">Featured</Badge>
<Badge variant="ink">Pro</Badge>
<Badge variant="success" dot>Online</Badge>
<Badge dot>Pending</Badge>

Props

PropTypeDefaultDescription
variant"default" | "accent" | "solid" | "ink" | "success""default"Visual style.
dotboolean—Prepends a 5px dot filled with currentColor.
childrenReactNode—Label.