# Tag

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

Small tags for tagging and categorization.

## 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.

Small tags for tagging and categorization.

## When to Use

- Attributes and dimensions suitable for marking things.
- sort.

## Demos

## Tag

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| color | Label color | `'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| string` | `'default'` |
| fill | Filled mode | `'solid' \| 'outline'` | `'solid'` |
| onClick | The click event | `(event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void` | - |
| round | Whether it is rounded corners | `boolean` | `false` |

### CSS Variables

| Name | Description | Default | Global |
| --- | --- | --- | --- |
| --background-color | Background color of the tag | If `fill=solid` , default value is the color of the `color` prop. If `fill=outline`, default value is `#ffffff`. | - |
| --border-color | Border color of the tag | Color of the `color` prop. | - |
| --border-radius | Border radius of the tag when `round=false` | `2px` | `--adm-tag-border-radius` |
| --text-color | Text color of the tag | If `fill=solid`, default value is `#ffffff`. If `fill=outline`, default value is the color of the `color` prop. | - |

---

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