> For the complete documentation index, see [llms.txt](https://tophivetheme.gitbook.io/vurox/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tophivetheme.gitbook.io/vurox/components/badge.md).

# Badge

```jsx
import { Badge } from 'antd';
```

```jsx
<Badge count={5}>
    <a href="#" className="head-example" />
</Badge>
<Badge count={0} showZero>
    <a href="#" className="head-example" />
</Badge>
<Badge count={22}>
    <a href="#" className="head-example" />
</Badge>
```

### API <a href="#api" id="api"></a>

```
<Badge count={5}>
  <a href="#" className="head-example" />
</Badge>
```

```
<Badge count={5} />
```

| Property      | Description                                                          | Type                                                           | Default | Version |
| ------------- | -------------------------------------------------------------------- | -------------------------------------------------------------- | ------- | ------- |
| color         | Customize Badge dot color                                            | string                                                         | -       |         |
| count         | Number to show in badge                                              | ReactNode                                                      |         |         |
| dot           | Whether to display a red dot instead of `count`                      | boolean                                                        | `false` |         |
| offset        | set offset of the badge dot, like`[x, y]`                            | `[number, number]`                                             | -       |         |
| overflowCount | Max count to show                                                    | number                                                         | 99      |         |
| showZero      | Whether to show badge when `count` is zero                           | boolean                                                        | `false` |         |
| status        | Set Badge as a status dot                                            | `success` \| `processing` \| `default` \| `error` \| `warning` | `''`    |         |
| text          | If `status` is set, `text` sets the display text of the status `dot` | string                                                         | `''`    |         |
| title         | Text to show when hovering over the badge                            | string                                                         | `count` |         |