---
name: Button 按钮
route: /button
parent: 组件
menu: 通用
---
import { Playground, Props } from 'docz'
import  Button,{Round}  from '../components/button'
import Icon from '../components/icon'
import  Radio  from '../components/radio'
import  Spinner  from '../components/spinner'

# Button 按钮

>提示: 展开代码编辑器可以在线编辑，实时生效

## 按钮类型

按钮有5种类型：全局按钮、主按钮、次按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次

<Playground>
    <Round>全局按钮</Round>
    <Button >主要按钮</Button>
    <Button appearance='stroke'>次要按钮</Button>
    <Button color="warning" >危险按钮</Button>
    <Button appearance='ghost'>链接按钮</Button>
</Playground>

## 图标按钮

通过`icon`或者`rightIcon`属性，可以指定button内嵌的图标

<Playground>
        <Button icon="Add">添加按钮</Button>
    <Button appearance='stroke' icon="Upload" iconColor="#747A8C">上传按钮</Button>
    <Button appearance='stroke' icon="Search" iconColor="#747A8C">搜索按钮</Button>
    <Button appearance='ghost' icon="Add">添加按钮</Button>

</Playground>

## 按钮尺寸

按钮高度分为36px、32px、28px、24px，四种尺寸大小，可以根据不同场景下选择合适的尺寸

<Playground>
    <Button size='large' appearance='stroke'>默认按钮</Button>
    <Button size='medium' appearance='stroke'>中等按钮</Button>
    <Button size='small' appearance='stroke'>小型按钮</Button>
    <Button size='tiny' appearance='stroke'>超小按钮</Button>
</Playground>

## 禁用状态
<Playground>
    <Button disabled>主要按钮</Button>
    <Button appearance='stroke' disabled>次要按钮</Button>
    <Button appearance='ghost' disabled>链接按钮</Button>
</Playground>

## 多个按钮组合

按钮组合使用时，推荐使用1个主操作+n个次操作，3个以上操作时把更多操作放到下拉菜单中使用

<Playground>
    <Button >次要按钮</Button>
        <Button appearance='stroke' >危险按钮</Button>
        <Button appearance='stroke' rightIcon="DropDown" iconSize="large">危险按钮</Button>
</Playground>

## 按钮组
可以将多个button放入组中，可以设置尺寸，若不设置，则为默认大小

<Playground>
    <Button appearance='stroke' icon="Left"/>
    <Button appearance='stroke' icon="Right"/>
    <Radio radioButton radioButtonStyle='stroke' defaultValue={2} options={[{label:'不限',value:1},
           {label:'选择人群',value:2},
           ]} 
          onChange={console.log}
    />
</Playground>

## 加载中状态
点击按钮后进行数据加载操作，在按钮上显示加载状态

<Playground>
    <Button >主要按钮</Button>
    <Button >
    <Spinner color="white"/>
    <span>加载中</span>
    </Button>
</Playground>

## API


<Props of={Button} />