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

# 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://vue-3.d2u327hy78ihgf.amplifyapp.com"
                target="_blank">
                Anchor
            </b-button>

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

# Router

Since0.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, optionalStringis-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, optionalStringis-small, is-medium, is-large
labelButton label, optional when default slotString
loadingAdd the loading state to the buttonBooleanfalse
roundedRounded styleBooleanfalse
outlinedOutlined styleBooleanfalse
focusedFocused styleBooleanfalse
invertedInverted styleBooleanfalse
hoveredHovered styleBooleanfalse
activeActive styleBooleanfalse
selectedSelected styleBooleanfalse
expandedButton will be expanded (full-width)Booleanfalse
icon-leftIcon name to show on the leftString
icon-rightIcon name to show on the rightString
icon-packIcon pack to useStringmdi, fa, fas, far, fad, falmdi
native-typeButton type, like nativeStringAny native button typebutton
tagButton tag nameStringbutton, a, input, router-link, nuxt-link or other nuxt aliasbutton
Any native attribute

# Variables

You can use these variables to customize this component.

Name
Default
Bulma variablesLink