---
url: /components/tag.md
---
# Tag 标签

`EvTag` 是胶囊形态的轻量标签，用来给内容打上状态、版本、促销等信息。它是官网里「最小的强调单元」：
默认 soft 淡底不抢戏，`lime` / `orange` 两个促销色调专门为定价与活动场景准备。

## 基础用法

```vue
<EvTag tone="primary">开源</EvTag>
<EvTag tone="success">稳定版</EvTag>
<EvTag tone="warning">公测中</EvTag>
```

## 促销色调

```vue
<EvTag tone="lime">立减 50%</EvTag>
<EvTag tone="orange">限时优惠</EvTag>
```

## 三种形态与进阶

```vue
<EvTag variant="solid" tone="primary">Solid</EvTag>
<EvTag tone="primary" icon="star">精选</EvTag>
<EvTag tone="neutral" closable @close="onClose" />
```

::: tip 与 EvBadge 的分工
`EvTag` 是独立存在的文本标签；附在图标按钮角上的数字/圆点用 [EvBadge](./badge)。
:::

## API

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| tone | 色调 | `'neutral' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'lime' \| 'orange'` | `'neutral'` |
| variant | 形态 | `'soft' \| 'solid' \| 'outline'` | `'soft'` |
| size | 尺寸 | `'small' \| 'default' \| 'large'` | `'default'` |
| icon | 图标名 | string | — |
| closable | 可关闭 | boolean | `false` |

### 插槽

| 插槽 | 说明 |
| --- | --- |
| default | 标签内容 |

### 事件

| 事件 | 说明 |
| --- | --- |
| close | 点击关闭钮时派发 |