---
name: Tag 标签
route: /tag
menu: 展示组件
---

import { Playground } from 'docz';
import Tag from './index';

## 演示

<Playground>
  {() => {
    const handleClick = React.useCallback(() => {
      console.log('click');
    }, []);
    const handleClose = React.useCallback(() => {
      console.log('close');
    }, []);
    return (
      <div>
        <Tag>npm</Tag>
        <Tag round onClick={handleClick} onClose={handleClose}>
          npm
        </Tag>
        <Tag type="primary" round onClick={handleClick} onClose={handleClose}>
          GitHub
        </Tag>
        <Tag type="success" onClick={handleClick} onClose={handleClose}>
          GitHub
        </Tag>
        <Tag type="warning" round onClick={handleClick} onClose={handleClose}>
          GitHub
        </Tag>
        <Tag type="error" round onClick={handleClick} onClose={handleClose}>
          GitHub
        </Tag>
        <Tag
          href="https://github.com/"
          type="error"
          round
          onClick={handleClick}
          onClose={handleClose}
        >
          GitHub
        </Tag>
      </div>
    );
  }}
</Playground>

## API

### Props

| 参数      | 类型                  | 默认值 | 说明         |
| --------- | --------------------- | ------ | ------------ |
| type      | `TagTypes`            | -      | 类型         |
| round     | `boolean`             | -      | 半圆         |
| href      | `string`              | -      | 链接         |
| target    | `_self`, `_blank`     | -      | 链接打开类型 |
| onClick   | `() => void`          | -      | 点击事件     |
| onClose   | `() => void`          | -      | 关闭事件     |
| className | `string`              | -      | 类名         |
| style     | `React.CSSProperties` | -      | 样式         |