<template>
    <div>
        <div>
            <h4>按钮类型</h4>
            <h-button type="default">默认按钮</h-button>
            <h-button type="primary">主要按钮</h-button>
            <h-button type="info">信息按钮</h-button>
            <h-button type="warning">警告按钮</h-button>
            <h-button type="danger">危险按钮</h-button>
            <h-button type="gray">危险按钮</h-button>
        </div>
        <div>
            <h4>朴素按钮</h4>
            <h-button plain type="primary">朴素按钮</h-button>
            <h-button plain type="danger">朴素按钮</h-button>
        </div>
        <div>
            <h4>按钮形状</h4>
            <h-button square type="primary">方形按钮</h-button>
            <h-button round type="danger">圆形按钮</h-button>
        </div>
        <div>
            <h4>按钮尺寸</h4>
            <h-button size="large">大号按钮</h-button>
            <h-button size="normal">普通按钮</h-button>
            <h-button size="small">小型按钮</h-button>
            <h-button size="mini">迷你按钮</h-button>
        </div>
        <div>
            <h4>按钮边框</h4>
            <h-button plain hairline type="primary">细边框按钮</h-button>
            <h-button plain hairline type="danger">细边框按钮</h-button>
        </div>
        <div>
            <h4>禁用状态</h4>
            <h-button type="default" disabled>默认按钮</h-button>
            <h-button type="primary" disabled>主要按钮</h-button>
            <h-button type="info" disabled>信息按钮</h-button>
        </div>
    </div>
</template>

<script>
import hButton from './index'
export default {
    name: "button-demo",
    data() {
        return {
            type: 'primary'
        }
    },
    components: {
        hButton
    },
    methods: {
        aa() {
            this.type = 'warning'
        }
    }
}
</script>