Badge
Badge normally appears in the upper right corner of the icon or text to prompt important information.
Install
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
countto 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 ofmaxCountis99. - Status: A variety of status are available:
default,processing,success,warninganderror. - Color: We provide a variety of preset colors for the badge. You can also set a custom color with
colorproperty. - 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
- How to hide the red dot when
dot=true? You can setcount=0. The logo will be displayed only whencount> 0.