<template>
    <div class="dev-button">
        <h4>size</h4>
        mini:
        <Button type="info" size="mini">你好</Button>
        small:
        <Button type="info" size="small">你好</Button>
        default:
        <Button type="info">你好</Button>
        large:
        <Button type="info" size="large">你好</Button>

        <h4>type=default(默认)</h4>
        文字：
        <Button>你好</Button>
        纯图标：
        <Button icon="list"></Button>
        文字+图标：
        <Button icon="list">你好</Button>
        文字disabled：
        <Button disabled>你好</Button>
        纯图标disabled：
        <Button disabled icon="list"></Button>
        文字+图标disabled：
        <Button disabled icon="list">你好</Button>
        loading：
        <Button loading>你好</Button>

        <h4>type=primary</h4>
        文字：
        <Button type="primary">你好</Button>
        纯图标：
        <Button type="primary" icon="list"></Button>
        文字+图标：
        <Button type="primary" icon="list">你好</Button>
        文字disabled：
        <Button type="primary" disabled>你好</Button>
        纯图标disabled：
        <Button type="primary" disabled icon="list"></Button>
        文字+图标disabled：
        <Button type="primary" disabled icon="list">你好</Button>
        loading：
        <Button type="primary" loading>你好</Button>

        <h4>type=danger</h4>
        文字：
        <Button type="danger">你好</Button>
        纯图标：
        <Button type="danger" icon="list"></Button>
        文字+图标：
        <Button type="danger" icon="list">你好</Button>
        文字disabled：
        <Button type="danger" disabled>你好</Button>
        纯图标disabled：
        <Button type="danger" disabled icon="list"></Button>
        文字+图标disabled：
        <Button type="danger" disabled icon="list">你好</Button>
        loading：
        <Button type="danger" loading>你好</Button>

        <h4>type=warning</h4>
        文字：
        <Button type="warning">你好</Button>
        纯图标：
        <Button type="warning" icon="list"></Button>
        文字+图标：
        <Button type="warning" icon="list">你好</Button>
        文字disabled：
        <Button type="warning" disabled>你好</Button>
        纯图标disabled：
        <Button type="warning" disabled icon="list"></Button>
        文字+图标disabled：
        <Button type="warning" disabled icon="list">你好</Button>
        loading：
        <Button type="warning" loading>你好</Button>

        <h4>type=success</h4>
        文字：
        <Button type="success">你好</Button>
        纯图标：
        <Button type="success" icon="list"></Button>
        文字+图标：
        <Button type="success" icon="list">你好</Button>
        文字disabled：
        <Button type="success" disabled>你好</Button>
        纯图标disabled：
        <Button type="success" disabled icon="list"></Button>
        文字+图标disabled：
        <Button type="success" disabled icon="list">你好</Button>
        loading：
        <Button type="success" loading>你好</Button>

        <h4>type=info</h4>
        文字：
        <Button type="info">你好</Button>
        纯图标：
        <Button type="info" icon="list"></Button>
        文字+图标：
        <Button type="info" icon="list">你好</Button>
        文字disabled：
        <Button type="info" disabled>你好</Button>
        纯图标disabled：
        <Button type="info" disabled icon="list"></Button>
        文字+图标disabled：
        <Button type="info" disabled icon="list">你好</Button>
        loading：
        <Button type="info" loading>你好</Button>

        <h4>type=text</h4>
        文字：
        <Button type="text">你好</Button>
        纯图标：
        <Button type="text" icon="list"></Button>
        文字+图标：
        <Button type="text" icon="list">你好</Button>
        文字disabled：
        <Button type="text" disabled>你好</Button>
        纯图标disabled：
        <Button type="text" disabled icon="list"></Button>
        文字+图标disabled：
        <Button type="text" disabled icon="list">你好</Button>
        loading：
        <Button type="text" loading>你好</Button>

        <h4>block</h4>
        文字：
        <Button type="primary" block>你好</Button>
        纯图标：
        <Button type="primary" block icon="list"></Button>
        文字+图标：
        <Button type="primary" block icon="list">你好</Button>
        文字disabled：
        <Button type="primary" disabled block>你好</Button>
        纯图标disabled：
        <Button type="primary" disabled block icon="list"></Button>
        文字+图标disabled：
        <Button type="primary" disabled block icon="list">你好</Button>
        loading：
        <Button type="primary" block loading>你好</Button>

        <h4>circle</h4>
        文字：
        <Button type="primary" circle>你好</Button>
        纯图标：
        <Button type="primary" circle icon="plus"></Button>
        文字+图标：
        <Button type="primary" circle icon="plus">你好</Button>
        文字disabled：
        <Button type="primary" disabled circle>你好</Button>
        纯图标disabled：
        <Button type="primary" disabled circle icon="plus"></Button>
        文字+图标disabled：
        <Button type="primary" disabled circle icon="plus">你好</Button>
        loading：
        <Button type="primary" circle loading>你好</Button>


        <h4>按钮组</h4>
        <ButtonGroup>
            <Button icon="left">你好</Button>
            <Button>你好</Button>
            <Button>你好
                <Icon type="right"></Icon>
            </Button>
        </ButtonGroup>
        <br>
        <ButtonGroup>
            <Button type="primary" icon="left">你好</Button>
            <Button type="primary">你好</Button>
            <Button type="primary">你好
                <Icon type="right"></Icon>
            </Button>
        </ButtonGroup>
        <br>
        <ButtonGroup>
            <Button type="success" icon="left">你好</Button>
            <Button type="success">你好</Button>
            <Button type="success">你好
                <Icon type="right"></Icon>
            </Button>
        </ButtonGroup>
        <br>
        <ButtonGroup>
            <Button type="info" icon="left">你好</Button>
            <Button type="info">你好</Button>
            <Button type="info">你好
                <Icon type="right"></Icon>
            </Button>
        </ButtonGroup>
        <br>
        <ButtonGroup>
            <Button type="danger" icon="left">你好</Button>
            <Button type="danger">你好</Button>
            <Button type="danger">你好
                <Icon type="right"></Icon>
            </Button>
        </ButtonGroup>
        <br>
        <ButtonGroup>
            <Button type="warning" icon="left">你好</Button>
            <Button type="warning">你好</Button>
            <Button type="warning">你好
                <Icon type="right"></Icon>
            </Button>
        </ButtonGroup>
        <br>
        <ButtonGroup>
            <Button icon="left"></Button>
            <Button icon="list"></Button>
            <Button icon="right"></Button>
        </ButtonGroup>
        <br>
        <ButtonGroup>
            <Button type="info" icon="plus" circle></Button>
            <Button type="info" icon="plus" circle></Button>
            <Button type="info" icon="plus" circle></Button>
        </ButtonGroup>

        <Button type="info" icon="plus" circle></Button>
        <Button type="info" icon="plus" circle>BUtton</Button>
        <Button type="info" circle>
            <Icon type="plus"></Icon>
            BUtton
        </Button>
    </div>
</template>
