# Badge

徽标组件，用于在元素右上角展示数字、文字标记或状态圆点。

## 适用场景

- 图标或头像上的消息数量提示
- 状态标记（进行中、成功、失败等）
- 小红点提示（未读消息）
- 文字标签标记（hot、new 等）

## Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| type | `"standard" \| "dot" \| "status"` | `"standard"` | 否 | 标记类型 |
| content | `ReactNode` | `-` | 否 | 标记内容。number 为数量，string 为内容 |
| max | `number` | `99` | 否 | content 为 number 时最大显示数量 n，超过则显示 n+ |
| color | `"brand" \| "success" \| "warning" \| "danger" \| "inactive"` | `-` | 否 | 颜色。已废弃的 `"primary"` 仍会在运行时归一到 `"brand"`，但不再作为合法类型 |
| title | `string` | `-` | 否 | 原生 hover title tip，如不同则以 content 为 tip，以便显示超出 max 的 count |

## 典型用法

### 数字与文字标记

```tsx
import {Badge} from '@befe/brick'

// 数字标记，超过 max 显示 n+
<Badge content={2}><div className="placeholder-cube" /></Badge>
<Badge content={100}><div className="placeholder-cube" /></Badge>
<Badge content={10000000} max={999}><div className="placeholder-cube" /></Badge>

// 文字标记
<Badge content={'hot'}><div className="placeholder-cube" /></Badge>
<Badge content={'new'} color={'success'}><div className="placeholder-cube" /></Badge>
```

### 状态标记

```tsx
<Badge type={'status'}>缺省</Badge>
<Badge type={'status'} color={'inactive'}>不活动</Badge>
<Badge type={'status'} color={'brand'}>进行中</Badge>
<Badge type={'status'} color={'success'}>成功</Badge>
<Badge type={'status'} color={'warning'}>警告</Badge>
<Badge type={'status'} color={'danger'}>失败</Badge>
```

### 小红点（动态显隐）

> content 为 0 时隐藏小红点，非 0 时显示

```tsx
import {useState} from 'react'
import {Badge} from '@befe/brick'
import {Icon} from '@befe/brick-comp-icon'
import {SvgSpeaker} from '@befe/brick-icon'

const [hasNew, setHasNew] = useState(true)

<Badge type={'dot'} content={hasNew ? 1 : 0}>
    <Icon svg={SvgSpeaker} />
</Badge>
```

## 注意事项

- Badge 标记有一圈白边（颜色为主题色 `base.$color-bg-normal`），用于非默认背景色时需自行修饰 `.brick-badge-mark` 的 `border-color`
- `type="dot"` 时，`content` 为 0 隐藏小红点，非 0 显示
- `max` 仅在 `content` 为 number 类型时生效