Button

The classic button, in different colors, sizes, and states

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

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

# Types and states 

<template>
    <section>

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

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

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

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

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

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

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

            <b-button type="is-dark">Dark</b-button>

            <b-button type="is-text">Text</b-button>
        </div>

        <div class="buttons">
            <b-button disabled>Disabled</b-button>

            <b-button loading>Loading</b-button>

            <b-button rounded>Rounded</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">
            <b-button type="is-primary"
                inverted>
                Inverted
            </b-button>

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

    </section>
</template>

# Sizes 

<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>

# Icons 

<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>

# Tags

Anchor 
<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>

# Router

New! 0.7.6
Docs Expo 
<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>

# API

Name
Description
Type
Values
Default
typeType (color) of the control, optional String is-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sass—
sizeVertical size of button, optional String is-small, is-medium, is-large—
loadingAdd the loading state to the button Boolean —false
roundedRounded style Boolean —false
outlinedOutlined style Boolean —false
expandedButton will be expanded (full-width) Boolean —false
icon-leftIcon name to show on the left String ——
icon-rightIcon name to show on the right String ——
icon-packIcon pack to use String mdi, fa, fas, far, fad, falmdi
native-typeButton type, like native String Any native button typebutton
tagButton tag name String button, a, input, router-link, nuxt-link or other nuxt aliasbutton
Any native attribute— — ——

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub