# Badge Component Documentation

## Overview

The Badge component displays a badge or badge-like visual element. It extends standard span functionality with customizable variants and shapes.

## Type Definition

```typescript
interface BadgeProps extends ComponentProps<"span">, VariantProps<typeof badgeVariants> {
  asChild?: boolean;
  variant?: "default" | "secondary" | "destructive" | "success" | "warning" | "accent";
  type?: "default" | "circle" | "dot";
}
```

## Properties

| Property | Type | Default | Purpose |
|----------|------|---------|---------|
| `variant` | `'default' \| 'secondary' \| 'destructive' \| 'success' \| 'warning' \| 'accent'` | `'default'` | Determines the visual styling |
| `type` | `'default' \| 'circle' \| 'dot'` | `'default'` | Controls shape and layout presentation |
| `asChild` | `boolean` | `false` | Enables `Slot` rendering for child element styling |
| span props | `ComponentProps<'span'>` | — | All native HTML span attributes supported |

## Basic Examples

Simple badge variants:
```jsx
<Badge>Default</Badge>
<Badge variant="success">Deployed</Badge>
<Badge type="circle">3</Badge>
<Badge type="dot" />
```

## Usage Patterns

**Variant showcase:**
```jsx
<Badge>Badge</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">warning</Badge>
```

**Circular badge indicators:**
```jsx
<Badge type="circle">3</Badge>
<Badge variant="secondary" type="circle">3</Badge>
<Badge variant="destructive" type="circle">3</Badge>
<Badge variant="success" type="circle">3</Badge>
<Badge variant="warning" type="circle">3</Badge>
```

**Dot indicators:**
```jsx
<Badge type="dot" />
<Badge variant="secondary" type="dot" />
<Badge variant="destructive" type="dot" />
<Badge variant="success" type="dot" />
<Badge variant="warning" type="dot" />
```

## References

- [Radix UI Badge Documentation](https://www.radix-ui.com/primitives/docs/components/badge)
- [API Reference](https://www.radix-ui.com/primitives/docs/components/badge#api-reference)