Toasts are simple text messages to inform the user

They have a slightly transparency and are queued to not confuse the user.

Note: They queue with Snackbars as well.

# From inside Vue instance

        <div class="buttons">
            <button class="button is-medium" @click="toast">
                Launch toast (default)

            <button class="button is-medium is-success" @click="success">
                Launch toast (custom)

            <button class="button is-medium is-danger" @click="danger">
                Launch toast (custom)

    export default {
        methods: {
            toast() {
                this.$'Something happened')
            success() {
                    message: 'Something happened correctly!',
                    type: 'is-success'
            danger() {
                    duration: 5000,
                    message: `Something's not good, also I'm on bottom`,
                    position: 'is-bottom',
                    type: 'is-danger'

# From outside Vue instance

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

import { ToastProgrammatic as Toast } from 'buefy''Toasty!')


typeType (color) of the toast 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-dark
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.
positionWhich position the toast will appear String is-top-right, is-top, is-top-left, is-bottom-right, is-bottom, is-bottom-leftis-top
durationVisibility duration in milliseconds Number 2000
queueIf should queue with others notices (snackbar/toast/notification) Boolean true
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. String body

# Variables

You can use these variables to customize this component.

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