Badge
Display numbers, text, and small red dots in the upper right corner.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
Display numbers, text, and small red dots in the upper right corner.
When to Use
It is suitable for reminders of productized new news, new functions, new services, etc., and attracts users to deal with it through eye-catching visual forms.
Demos
Badge
Props
| Name | Description | Type | Default |
|---|---|---|---|
| bordered | Whether to have border. | boolean | false |
| color | The background color of the Badge. Equivalent to setting the --color CSS variable. | string | - |
| content | The content of the Badge: if null undefined '' or nothing is passed, it would not be displayed; if Badge.dot is passed, a small red dot would be displayed | React.ReactNode | typeof Badge.dot | - |
| wrapperClassName | Badge wrap class name | string | - |
| wrapperStyle | Badge wrap style | React.CSSProperties | - |
CSS Variables
| Name | Description | Default | Global |
|---|---|---|---|
| --color | The background color of the Badge | var(--adm-color-highlight) | --adm-badge-color |
| --right | The offset to the left, relative to the far right | 0 | - |
| --top | The downward offset, relative to the uppermost edge | 0 | - |