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.$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
                        })
                    }
                })
            }
        }
    }
</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
`type`	Type (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 Sass	`is-success`
`message`	Message text	String	—	—
`position`	Which position the snackbar will appear	String	`is-top-right`, `is-top`, `is-top-left`, `is-bottom-right`, `is-bottom`, `is-bottom-left`	`is-bottom-right`
`duration`	Visibility duration in miliseconds	Number	—	`3500`
`queue`	If should queue with others notices (snackbar/toast/notification)	Boolean	—	`true`
`indefinite`	Show the Snackbar indefinitely until it is dismissed	Boolean	—	`false`
`container`	DOM 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.	String	—	`body`
`actionText`	Snackbar's button text, set `null` for buttonless	String	—	`OK`
`onAction`	Callback function when the button is clicked	Function	—	—

# 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-transform`	`uppercase`
`$snackbar-box-shadow`	`0 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