@tarojsx/ui/docs/components/Badge.mdx

We reinvents the UI for Taro3+

---
title: Badge 徽标
---

## 示例

import { Badge, Button } from '@tarojsx/ui'
import { UI } from '@/ui'

```jsx title="数字"
<Badge value={10}>
    <Button size="small">按钮</Button>
</Badge>

<Badge value={100} maxValue={99}>
    <Button size="small">按钮</Button>
</Badge>
```

<UI>
    <span style={{ marginRight: 60 }}>
        <Badge value={10}>
            <Button size="small">按钮</Button>
        </Badge>
    </span>
    <span>
        <Badge value={100} maxValue={99}>
            <Button size="small">按钮</Button>
        </Badge>
    </span>
</UI>

```jsx title="小红点"
<Badge dot>
    <Button size="small">按钮</Button>
</Badge>
```

<UI>
    <Badge dot>
        <Button size="small">按钮</Button>
    </Badge>
</UI>

```jsx title="文字"
<Badge value="NEW">
    <Button size="small">按钮</Button>
</Badge>
```

<UI>
    <Badge value="NEW">
        <Button size="small">按钮</Button>
    </Badge>
</UI>

## API

-   [Taro UI 文档](https://taro-ui.jd.com/#/docs/badge)
-   [`<Badge />`](../modules/_badge_.md)
-   [`BadgeProps`](../interfaces/_badge_.badgeprops.md)