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.$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="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
<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
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-linkbutton
Any native attribute

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

Improve this page on GitHub