# Badge

- Page: https://jiguang132.com/resources/arco-design/docs/badge
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Badge normally appears in the upper right corner of the icon or text to prompt important information.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Basic usage. Just specify `count` to display the badge.
- **Standalone**: Used in standalone when children is empty.
- **Red Badge**: A red dot will be displayed instead of the count when `dot=true`. If count equals 0, the dot will be hidden.
- **Text**: Customize the content.
- **Max Count**: If the count is larger than `maxCount`, `${maxCount}+` will be displayed. The default value of `maxCount` is `99`.
- **Status**: A variety of status are available: `default`, `processing`, `success`, `warning` and `error`.
- **Color**: We provide a variety of preset colors for the badge. You can also set a custom color with `color` property.
- **Animated**: The count will be animated as it changes.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Badge

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|dot|Whether to display a red dot instead of `count`|boolean |`-`|
|maxCount|Max count to show. If count is larger than this value, it will be displayed as `${maxCount}+`|number |`99`|
|text|Set the display text of the status dot|string |`-`|
|color|Customize dot color|\| 'red'\| 'orangered'\| 'orange'\| 'gold'\| 'lime'\| 'green'\| 'cyan'\| 'arcoblue'\| 'purple'\| 'pinkpurple'\| 'magenta'\| 'gray'\| string |`-`|
|status|Set badge as a status dot|'default' \| 'processing' \| 'success' \| 'warning' \| 'error' |`-`|
|count|Number to show in badge|number \| ReactNode |`0`|
|className|Additional css class|string \| string[] |`-`|
|dotClassName|Customize Badge dot className|string \| string[] |`-`|
|dotStyle|Customize Badge dot style|CSSProperties |`-`|
|offset|Set offset of the badge dot|[number, number] |`-`|
|style|Additional style|CSSProperties |`-`|

## Questions

1. How to hide the red dot when `dot=true`?
   You can set `count=0`. The logo will be displayed only when `count> 0`.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt