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

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

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

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