Toast

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

<template>
    <section>
        <button class="button is-medium" @click="toast">
            Launch toast (default)
        </button>

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

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

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

# From outside Vue instance

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

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

# API

Name
Description
Type
Values
Default
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 String
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.

Name
Default
$toast-border-radius2em
$toast-opacity0.92
$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