Snackbar

When a Dialog seems a bit overkill for the task, Snackbars are good candidates

They have only one button, and by default are queued to not confuse the user.

Note: They queue with Toasts as well.

# From inside Vue instance

<template>
    <section>
        <div class="buttons">
            <b-button
                label="Launch snackbar (default)"
                size="is-medium"
                @click="snackbar" />
            <b-button
                label="Launch snackbar (custom)"
                type="is-warning"
                size="is-medium"
                @click="warning" />
            <b-button
                label="Launch snackbar (custom)"
                type="is-danger"
                size="is-medium"
                @click="danger" />
            <b-button
                label="Launch snackbar (with cancel)"
                size="is-medium"
                @click="hasCancel" />
        </div>
    </section>
</template>

<script>
    export default {
        methods: {
            snackbar() {
                this.$buefy.snackbar.open(`Default, positioned bottom-right with a green 'OK' button`)
            },
            warning() {
                this.$buefy.snackbar.open({
                    message: 'Yellow button and positioned on top, click to close',
                    type: 'is-warning',
                    position: 'is-top',
                    actionText: 'Retry',
                    indefinite: true,
                    onAction: () => {
                        this.$buefy.toast.open({
                            message: 'Action pressed',
                            queue: false
                        })
                    }
                })
            },
            danger() {
                this.$buefy.snackbar.open({
                    duration: 5000,
                    message: 'Snackbar with red action, positioned on bottom-left and a callback.<br>Note: <em>Message can include html</em>.',
                    type: 'is-danger',
                    position: 'is-bottom-left',
                    actionText: 'Undo',
                    queue: false,
                    onAction: () => {
                        this.$buefy.toast.open({
                            message: 'Action pressed',
                            queue: false
                        })
                    }
                })
            },
            hasCancel() {
                this.$buefy.snackbar.open({
                    indefinite: true,
                    message: 'Snackbar with a cancel button.',
                    cancelText: 'Cancel',
                })
            }
        }
    }
</script>

# From outside Vue instance

You can use it on Vuex or VueRouter using this syntax:

import { SnackbarProgrammatic as Snackbar } from 'buefy'
Snackbar.open('Look at me!')

# API

Name
Description
Type
Values
Default
typeType (color) of the action button. Please notice that it is the name of the parent class alsoStringis-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 Sassis-success
messageMessage text (can contain HTML).
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.
String, Array
positionWhich position the snackbar will appearStringis-top-right, is-top, is-top-left, is-bottom-right, is-bottom, is-bottom-leftis-bottom-right
durationVisibility duration in milisecondsNumber3500
queueIf should queue with others notices (snackbar/toast/notification)Booleantrue
indefiniteShow the Snackbar indefinitely until it is dismissedBooleanfalse
containerDOM element the toast will be created on. Note that this also changes the position of the toast from fixed to absolute. Meaning that the container should be fixed. Also note that this will override the defaultContainerElement if you specified it in your Buefy Constructor Options. See Constructor options for more details.Stringbody
actionTextSnackbar's button text, set null for buttonlessStringOK
onActionCallback function when the button is clickedFunction
cancelTextSnackbar's cancel button text. Default is no cancel buttonString

# Variables

You can use these variables to customize this component.

Name
Default
$snackbar-background-color$dark
$snackbar-color$dark-invert
$snackbar-border-radius$radius
$snackbar-button-text-transformuppercase
$snackbar-box-shadow0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)

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

Improve this page on GitHub