---
title: Tag 标签
order: 29
group:
path: /components
nav:
title: 组件
path: /components
---
## TODO
- `active` 和 `hover` 状态
- 设置 `backgroundColor`
## 使用
### 基本使用
```jsx
import React from 'react';
import { Tag } from 'quanta-design';
const itemStyle = { marginBottom: 12 };
export default () => (
success
success
error
error
processing
processing
warning
warning
default
default
);
```
### 带边框
添加 `bordered` 属性，可以设置边框
```jsx
import React from 'react';
import { Tag } from 'quanta-design';
const itemStyle = { marginBottom: 12 };
export default () => (
success
error
processing
warning
default
);
```
### 带图标
添加 `icon` 属性，可以设置图标。
```jsx
import React from 'react';
import { Tag, Icons } from 'quanta-design';
const { UserIcon } = Icons;
const itemStyle = { marginBottom: 12 };
export default () => (
);
```