---
name: Button 按钮
route: /button
menu: 基础组件
---

import { Playground } from 'docz';
import Button, { ButtonGroup } from './index';
import { IconSearch } from '../icon/index';

## 演示

### 按钮类型

<Playground>
  <Button>Default</Button> <Button type="primary">Primary</Button>{' '}
  <Button type="success">Success</Button>{' '}
  <Button type="warning">Warning</Button> <Button type="error">Error</Button>
</Playground>

### 扁平按钮

<Playground>
  <Button flat>Flat</Button>{' '}
  <Button type="primary" flat>
    Flat
  </Button>{' '}
  <Button type="success" flat>
    Flat
  </Button>{' '}
  <Button type="warning" flat>
    Flat
  </Button>{' '}
  <Button type="error" flat>
    Flat
  </Button>
</Playground>

### 文字按钮

<Playground>
  <Button text>Text</Button>{' '}
  <Button type="primary" text>
    Text
  </Button>{' '}
  <Button type="success" text>
    Text
  </Button>{' '}
  <Button type="warning" text>
    Text
  </Button>{' '}
  <Button type="error" text>
    Text
  </Button>
</Playground>

### 纯按钮

<Playground>
  <Button pure>Pure</Button>{' '}
  <Button type="primary" pure>
    Pure
  </Button>{' '}
  <Button type="success" pure>
    Pure
  </Button>{' '}
  <Button type="warning" pure>
    Pure
  </Button>{' '}
  <Button type="error" pure>
    Pure
  </Button>
</Playground>

### 半圆

<Playground>
  <Button type="primary" round>
    Round
  </Button>
</Playground>

### 全圆

<Playground>
  <Button type="primary" fullRound>
    <IconSearch />
  </Button>
</Playground>

### 按钮链接

<Playground>
  <Button href="http://t.tt" target="_blank" type="primary">
    Smartisan
  </Button>
</Playground>

### 块级按钮

<Playground>
  <Button block>This is block.</Button>
</Playground>

### 尺寸

<Playground>
  <Button size="large">Large</Button> <Button size="normal">Normal</Button>{' '}
  <Button size="small">Small</Button>
</Playground>

### 加载中

<Playground>
  {() => {
    const [loading, setLoading] = React.useState(false);
    const handleClick = () => {
      setLoading(true);
      setTimeout(() => setLoading(false), 1500);
    };
    return (
      <Button loading={loading} onClick={handleClick}>
        Start Loading
      </Button>
    );
  }}
</Playground>

### 菜单

<Playground>
  {() => {
    const handleClick = menuItem => {
      console.log(menuItem);
    };
    const menuItems = [
      { label: 'Apple', href: '//www.apple.com' },
      { label: 'Smartisan', href: '//www.smartisan.com' },
      { label: 'OnePlus', href: '//www.oneplus.com' },
    ];
    return (
      <Button menuItems={menuItems} onMenuClick={handleClick}>
        MenuItems
      </Button>
    );
  }}
</Playground>

### 禁用

<Playground>
  <Button disabled>Disabled</Button>{' '}
  <Button type="primary" disabled>
    Disabled
  </Button>{' '}
  <Button type="error" flat disabled>
    Disabled
  </Button>{' '}
  <Button type="primary" text disabled>
    Disabled
  </Button>
</Playground>

### 按钮组

<Playground>
  <ButtonGroup>
    <Button>Past</Button>
    <Button>Present</Button>
    <Button>Future</Button>
  </ButtonGroup>{' '}
  <ButtonGroup type="primary">
    <Button>Past</Button>
    <Button>Present</Button>
    <Button>Future</Button>
  </ButtonGroup>
</Playground>

## API

### Button Props

| 参数         | 类型                                                | 默认值    | 说明             |
| ------------ | --------------------------------------------------- | --------- | ---------------- |
| type         | `default`, `primary`, `success`, `warning`, `error` | `default` | 基本类型         |
| size         | `normal`, `large`, `small`                          | `normal`  | 尺寸             |
| flat         | `boolean`                                           | `false`   | 扁平按钮         |
| text         | `boolean`                                           | `false`   | 文字按钮         |
| pure         | `boolean`                                           | `false`   | 纯按钮           |
| round        | `boolean`                                           | `false`   | 半圆             |
| fullRound    | `boolean`                                           | `false`   | 全圆             |
| block        | `boolean`                                           | `false`   | 块级按钮         |
| loading      | `boolean`                                           | `false`   | 加载中           |
| disabled     | `boolean`                                           | `false`   | 禁用             |
| href         | `string`                                            | -         | 链接             |
| target       | `_self`, `_blank`                                   | `_blank`  | 链接的打开方式   |
| menuItems    | `PopMenuProps['items']`                             | -         | 菜单项           |
| menuTrigger  | `PopMenuProps['trigger']`                           | -         | 菜单触发方式     |
| menuPosition | `PopMenuProps['position']`                          | -         | 菜单位置         |
| menuDisabled | `PopMenuProps['disabled']`                          | -         | 禁用菜单         |
| menuDelay    | `PopMenuProps['delay']`                             | -         | 菜单延迟         |
| onMenuClick  | `PopMenuProps['onClick']`                           | -         | 点击菜单项的事件 |
| onClick      | `React.EventHandler`                                | -         | 点击回调         |
| className    | `string`                                            | -         | 类名             |
| style        | `React.CSSProperties`                               | -         | 样式             |

### ButtonGroup Props

| 参数      | 类型                   | 默认值 | 说明             |
| --------- | ---------------------- | ------ | ---------------- |
| children  | `React.ReactElement[]` | -      | 内嵌 Button 组件 |
| className | `string`               | -      | 类名             |
| style     | `React.CSSProperties`  | -      | 样式             |