# Badge: Variants and appearances

> The default `outline` appearance keeps a neutral surface and puts the status color on the dot or icon. Use `appearance="solid"` when the badge needs to stand out, or `appearance="muted"` for a quiet filled chip. `shape="pill"` rounds it fully.

Example: https://hextaui.com/docs/badge/examples/variants
Component docs: https://hextaui.com/docs/badge.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/badge-variants.json
```

This adds `components/examples/badge/variants.tsx` with the Badge component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/badge/variants.tsx"
import { Badge, BadgeDot } from "@/components/ui/badge"

export function BadgeVariants() {
  return (
    <div className="flex flex-col items-center gap-3">
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge>
          <BadgeDot />
          Draft
        </Badge>
        <Badge variant="success">
          <BadgeDot />
          Paid
        </Badge>
        <Badge variant="info">
          <BadgeDot />
          Syncing
        </Badge>
        <Badge variant="warning">
          <BadgeDot />
          Pending
        </Badge>
        <Badge variant="destructive">
          <BadgeDot />
          Failed
        </Badge>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge appearance="solid">Draft</Badge>
        <Badge appearance="solid" variant="success">
          Paid
        </Badge>
        <Badge appearance="solid" variant="info">
          Syncing
        </Badge>
        <Badge appearance="solid" variant="warning">
          Pending
        </Badge>
        <Badge appearance="solid" variant="destructive">
          Failed
        </Badge>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge appearance="muted">Draft</Badge>
        <Badge appearance="muted" shape="pill">
          nngroup.com
        </Badge>
        <Badge appearance="muted" shape="pill" variant="info">
          <BadgeDot />
          Syncing
        </Badge>
      </div>
    </div>
  )
}
```

## Props in this example

### Badge

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "success" \| "info" \| "warning" \| "destructive"` | `"default"` | Colors the dot and icons in outline, or the surface in solid. |
| `appearance` | `"outline" \| "solid" \| "muted"` | `"outline"` |  |
| `shape` | `"default" \| "pill"` | `"default"` |  |

## More Badge examples

- [Sizes](https://hextaui.com/docs/badge/examples/sizes.md)
- [Removable](https://hextaui.com/docs/badge/examples/removable.md)
- [Controlled](https://hextaui.com/docs/badge/examples/controlled.md)
- [Counts](https://hextaui.com/docs/badge/examples/counts.md)
- [Interactive](https://hextaui.com/docs/badge/examples/interactive.md)
- [Long content](https://hextaui.com/docs/badge/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/badge/examples/rtl.md)