dotUI

Badge

Badges are small status descriptors for UI elements.

Badge

<Badge>Badge</Badge>

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/badge

Use badges to highlight status, categorize items, or show counts.

import { Badge } from "@/components/ui/badge";

<Badge>Badge</Badge>

Use the controls below to experiment with different badge props and see the live preview and code update.

Badge

children

variant

<Badge variant="default">Badge</Badge>

Missing description.

Supports all span attributes.

Prop	Type	Default
	`union`	`'default'`

Bringing singularity to the web.

Built with passion by @mehdibha.