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" />
            <b-button
                label="Launch snackbar (pause on hover)"
                type="is-link"
                size="is-medium"
                @click="pause" />
        </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',
                })
            },
            pause() {
                this.$buefy.snackbar.open({
                    message: 'I can be paused if you hover over me',
                    pauseOnHover: true,
                    type: 'is-link',
                })
            },
        }
    }
</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 (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	—	—
`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`
`pause-on-hover`	Pause and show on hover until hover off (it works when indefinite is false)	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	—	—
`cancelText`	Snackbar's cancel button text. Default is no cancel button	String	—	—

Name	Description	Parameters	Return
`open`	Opens the snackbar	String, Object	Reference to the opened Snackbar
`close`	Close the snackbar	—	—

# 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