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>
        <button class="button is-medium" @click="snackbar">
            Launch snackbar (default)
        </button>

        <button class="button is-medium is-warning" @click="warning">
            Launch snackbar (custom)
        </button>

        <button class="button is-medium is-danger" @click="danger">
            Launch snackbar (custom)
        </button>
    </section>
</template>

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

From outside Vue instance

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

import { Snackbar } from 'buefy/dist/components/snackbar'
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 also 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 Sassis-success
messageMessage text String
positionWhich position the snackbar will appear String is-top-right, is-top, is-top-left, is-bottom-right, is-bottom, is-bottom-leftis-bottom-right
durationVisibility duration in miliseconds Number 3500
queueIf should queue with others notices (snackbar/toast) Boolean true
indefiniteShow the Snackbar indefinitely until it is dismissed Boolean false
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. String body
actionTextSnackbar's button text, set null for buttonless String OK
onActionCallback function when the button is clicked Function

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

Improve this page on GitHub