---
title: 业务预定义标签
order: 2
docGenIncludes:
  - src/components/YwTag/index.tsx
---

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { YwTag, YwTitle } from '@ywfe/yw-design';
class App extends Component {
  render() {
    return (
      <div>
        <YwTitle size="m" text="标签（推荐）" />
        <YwTag text="推荐" color="#F15A5A" />
        <YwTag text="新品" color="#07C160" />
        <YwTag text="新品" color="#BFBFBF" />
        <YwTitle size="m" text="标签（场次）" />
        <YwTag size="s" text="混场" color="#9C7AFF" />
        <YwTag size="s" text="专场" color="#ED6A0C" />
        <YwTag size="s" text="小专场" color="#FAAD14" />
        <YwTitle size="m" text="双色标签" />
        <YwTag text="3天19时59分" color="error" />
        <YwTag text="已通过" color="success" />
        <YwTag text="待审批" color="warning" />
        <YwTag text="编辑" color="processing" />
        <YwTag text="已结束" color="default" />
        <YwTitle size="m" text="单色标签" />
        <YwTag styleType="hollow" color="processing" text="快手CPS" />
        <YwTag styleType="hollow" color="error" text="已过期" />
        <YwTag styleType="hollow" color="success" text="已通过" />
        <YwTag styleType="hollow" color="warning" text="审核中" />
        <YwTitle size="m" text="业务定制标签" />
        <YwTag color="#EF813E" bizName="amount" text={['佣金', '18.00%']} />
        <YwTitle size="m" text="商家等级" />
        <YwTag bizName="level" text="L1" />
        <YwTag bizName="level" text="L2" />
        <YwTag bizName="level" text="L3" />
        <YwTag bizName="level" text="L4" />
        <YwTag bizName="level" text="L5" />
        <YwTitle size="m" text="品牌等级" />
        <YwTag text="优质" color="#FFAA00" size="s" />
        <YwTag text="普通" color="#0077FF" size="s" />
        <YwTag text="高潜" color="#9C7AFF" size="s" />
        <YwTitle size="m" text="质检等级" />
        <YwTag styleType="hollow" color="#0B8746" text="合格一等品" />
        <YwTag styleType="hollow" color="#04A551" text="合格二等品" />
        <YwTag styleType="hollow" color="#07C160" text="合格三等品" />
        <YwTag styleType="hollow" color="#09A7A7" text="合格四等品" />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
```