---
name: Button
menu: Components
---

# Button
import { Playground, Props } from 'docz'
import Button from './index'
import Icon from '../icon/index';
import '../icon/style/index.scss';
import './style/index.scss';


## Props & Methods
<Props of={Button} />

## Sizes
<Playground>
    <Button size="s">Small</Button>
    <Button>Medium</Button>
    <Button size="l">Large</Button>
</Playground>


## Colors
<Playground>
    <Button color="default">Default</Button>
    <Button color="primary">Primary</Button>
    <Button color="outline">Outline</Button>
    <Button color="weak">Weak</Button>
</Playground>

## Disabled
<Playground>
    <Button color="default" disabled={true}>No Click</Button>
    <Button color="primary" disabled={true}>No Click</Button>
    <Button color="outline" disabled={true}>No Click</Button>
    <Button color="weak" disabled={true}>No Click</Button>
</Playground>

## Button with Icon
<Playground>
{() => {
    const iconStyle = {fontSize: 22, padding: '0 5px'};
    return <>
    <Button>
        <Icon type="weixin" style={iconStyle} />
        <span>Wechat</span>
    </Button>
    <Button color="primary">
        <Icon type="weixin" style={iconStyle} />
        <span>Wechat</span>
    </Button>
    <Button color="outline">
        <Icon type="weixin" style={iconStyle} />
        <span>Wechat</span>
    </Button>
    <Button color="weak">
        <Icon type="weixin" style={iconStyle} />
        <span>Wechat</span>
    </Button>
    </>
}}
</Playground>

## Links
<Playground>
{
    () => {
        const iconStyle = {fontSize: 22, padding: '0 5px'};
        return <>
        <Button href="//ke.qq.com" target="_blank">
            <Icon type="weixin" style={iconStyle} />
        </Button>
        <Button href="//ke.qq.com" target="_blank" color="primary">
            <Icon type="weixin" style={iconStyle} />
        </Button>
        <Button href="//ke.qq.com" target="_blank" color="outline">
            <Icon type="weixin" style={iconStyle} />
        </Button>
        <Button href="//ke.qq.com" target="_blank" color="weak">
            <Icon type="weixin" style={iconStyle} />
        </Button>
        </>
    }
}
</Playground>