# Badge: Counts

> `<BadgeCount />` rolls only the digits that change, and caps at `max` (99 by default) with a plus sign. Screen readers always hear the real number.

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

## Add this example

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

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

## Source

```tsx title="components/examples/badge/counts.tsx"
"use client"

import * as React from "react"
import { IconInbox } from "@tabler/icons-react"

import { Badge, BadgeCount } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

export function BadgeCounts() {
  const [count, setCount] = React.useState(9)

  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge appearance="solid" variant="destructive">
          <BadgeCount value={count} />
        </Badge>
        <Badge>
          <BadgeCount value={count} max={999} />
          unread
        </Badge>
        <Button variant="outline">
          <IconInbox />
          Inbox
          <Badge size="sm">
            <BadgeCount value={count} />
          </Badge>
        </Button>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => setCount((value) => value + 1)}
        >
          +1
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => setCount((value) => Math.max(0, value - 1))}
        >
          −1
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => setCount((value) => value + 10)}
        >
          +10
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => setCount(Math.floor(Math.random() * 1200))}
        >
          Random
        </Button>
      </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"` |  |
| `size` | `"sm" \| "default" \| "lg"` | `"default"` |  |

### BadgeCount

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` | – | Negative and non-finite values show 0. |
| `max` | `number` | `99` | Values above it show as max+. Pass Infinity for no cap. |

## More Badge examples

- [Variants and appearances](https://hextaui.com/docs/badge/examples/variants.md)
- [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)
- [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)