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.$toast.open('Something happened')
            },
            success() {
                this.$toast.open({
                    message: 'Something happened correctly!',
                    type: 'is-success'
                })
            },
            danger() {
                this.$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 { Toast } from 'buefy/dist/components/toast'
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) 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. String body

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

Improve this page on GitHub