Button

<template>
    <section>
        <b-button @click="clickMe">Click Me</b-button>
    </section>
</template>

<script>
    export default {
        methods: {
            clickMe() {
                this.$buefy.notification.open('Clicked!!')
            }
        }
    }
</script>

<template>
    <section>

        <div class="buttons">
            <b-button type="is-primary">Primary</b-button>
            <b-button type="is-primary is-light">Primary Light</b-button>

            <b-button type="is-success">Success</b-button>
            <b-button type="is-success is-light">Success Light</b-button>

            <b-button type="is-danger">Danger</b-button>
            <b-button type="is-danger is-light">Danger Light</b-button>

            <b-button type="is-warning">Warning</b-button>
            <b-button type="is-warning is-light">Warning Light</b-button>

            <b-button type="is-info">Info</b-button>
            <b-button type="is-info is-light">Info Light</b-button>

            <b-button type="is-link">Link</b-button>
            <b-button type="is-link is-light">Link Light</b-button><br />

            <b-button type="is-light">Light</b-button>
            <b-button type="is-dark">Dark</b-button>
            <b-button type="is-text">Text</b-button>
            <b-button type="is-ghost">Ghost</b-button>
        </div>

        <div class="buttons">
            <b-button>Normal</b-button>
            <b-button disabled>Disabled</b-button>
            <b-button loading>Loading</b-button>
            <b-button rounded>Rounded</b-button>
            <b-button focused>Focused</b-button>
            <b-button hovered>Hovered</b-button>
            <b-button selected>Selected</b-button>
            <b-button active>Active</b-button>
        </div>

        <div class="buttons">
            <b-button type="is-primary" outlined>Outlined</b-button>
            <b-button type="is-success" outlined>Outlined</b-button>
            <b-button type="is-danger" outlined>Outlined</b-button>
            <b-button type="is-warning" outlined>Outlined</b-button>
        </div>

        <div class="buttons">
            <b-button type="is-primary" expanded>Expanded</b-button>
        </div>

        <div class="notification is-primary">
            <div class="buttons">
                <b-button type="is-primary" inverted>Inverted</b-button>
                <b-button type="is-primary" inverted outlined>Invert Outlined</b-button>
            </div>
        </div>

    </section>
</template>

<template>
    <section>
        <div class="buttons">
            <b-button size="is-small">Small</b-button>
            <b-button>Default</b-button>
            <b-button size="is-medium">Medium</b-button>
            <b-button size="is-large">Large</b-button>
        </div>
    </section>
</template>

<template>
    <section>
        <div class="buttons">
            <b-button size="is-small"
                icon-left="github-circle">
                Add
            </b-button>

            <b-button icon-left="github-circle">
                Add
            </b-button>

            <b-button size="is-medium"
                icon-left="github-circle">
                Add
            </b-button>

            <b-button size="is-large"
                icon-left="github-circle">
                Add
            </b-button>
        </div>

        <div class="buttons">
            <b-button type="is-danger"
                icon-left="delete">
                Delete
            </b-button>

            <b-button type="is-danger"
                icon-right="delete">
                Delete
            </b-button>

            <b-button type="is-danger"
                icon-right="delete" />
        </div>

    </section>
</template>

<template>
    <section>
        <div class="buttons">
            <b-button>Button</b-button>

            <b-button tag="a"
                href="https://buefy.org"
                target="_blank">
                Anchor
            </b-button>

            <b-button tag="input"
                native-type="submit"
                value="Submit input" />
        </div>
    </section>
</template>

<template>
    <section>
        <div class="buttons">
            <b-button tag="router-link"
                to="/documentation"
                type="is-link">
                Docs
            </b-button>
            <b-button tag="router-link"
                to="/expo"
                type="is-info">
                Expo
            </b-button>
        </div>
    </section>
</template>