# Badge

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/badge
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Display numbers, text, and small red dots in the upper right corner.

## Install

```bash
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` | - |

---

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