# Badge

Compact status labels with solid and dot appearances.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





## Preview [#preview]

<ComponentPreview src="examples/components/badge.tsx">
  <BadgeDemo />
</ComponentPreview>

## Installation [#installation]

<CodeBlockCommand __npm__="`npx shadcn@latest add ${SITE.URL}/r/badge.json`" __pnpm__="`pnpm dlx shadcn@latest add ${SITE.URL}/r/badge.json`" __yarn__="`yarn dlx shadcn@latest add ${SITE.URL}/r/badge.json`" __bun__="`bunx shadcn@latest add ${SITE.URL}/r/badge.json`" />

## Usage [#usage]

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

<Badge variant="dot" color="green">
  Ready
</Badge>;
```

## API Reference [#api-reference]

`variant`: solid or dot. Existing default, secondary, outline and destructive variants remain available. `color`: the demonstrated Tailwind color names. `size`: default or compact (inherited when omitted). `icon`: an SVG component. Shape follows ShapeProvider.