Notification

Bold notification blocks to alert your users of something

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit

<template>
    <section>
        <button class="button block" @click="isActive = !isActive">Toggle</button>
        <b-notification :active.sync="isActive" aria-close-label="Close notification">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isActive: true
            }
        }
    }
</script>

# Types

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit

<template>
    <section>
        <b-notification aria-close-label="Close notification">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>

        <b-notification type="is-info" aria-close-label="Close notification">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>

        <b-notification type="is-success" aria-close-label="Close notification">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>

        <b-notification
            type="is-warning"
            aria-close-label="Close notification"
            role="alert">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>

        <b-notification
            type="is-danger"
            aria-close-label="Close notification"
            role="alert">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>
    </section>
</template>

# Icons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit

<template>
    <section>
        <b-notification
            type="is-info"
            has-icon
            aria-close-label="Close notification">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>

        <b-notification
            type="is-success"
            has-icon
            aria-close-label="Close notification">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>

        <b-notification
            type="is-warning"
            has-icon
            aria-close-label="Close notification"
            role="alert">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>

        <b-notification
            type="is-danger"
            has-icon
            aria-close-label="Close notification"
            role="alert">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>
    </section>
</template>

# Auto Close

Notification will be automatically closed after duration.

<template>
    <section>
        <button class="button block" @click="isActive = true" :disabled="isActive">Show</button>
        <b-notification
            auto-close type="is-danger"
            :active.sync="isActive"
            aria-close-label="Close notification">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
        </b-notification>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isActive: false
            }
        }
    }
</script>

# Programmatically opening

New! 0.7.4

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

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

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

<script>
    export default {
        methods: {
            simple() {
                this.$buefy.notification.open('Something happened')
            },
            success() {
                this.$buefy.notification.open({
                    message: 'Something happened correctly!',
                    type: 'is-success'
                })
            },
            danger() {
                const notif = this.$buefy.notification.open({
                    duration: 5000,
                    message: `Something's not good, also I'm on bottom`,
                    position: 'is-bottom-right',
                    type: 'is-danger',
                    hasIcon: true
                })
                notif.$on('close', () => {
                    this.$buefy.notification.open('Custom notification closed!')
                })
            }
        }
    }
</script>

# From outside Vue instance

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

import { NotificationProgrammatic as Notification } from 'buefy'
Notification.open('Notify!')

# API

Name	Description	Type	Values	Default
`type`	Type (color) of the notification, optional	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	—
`active`	Whether notification is active or not, use the `.sync` modifier to make it two-way binding	Boolean	—	`true`
`closable`	Adds an 'X' button that closes the notification	Boolean	—	`true`
`auto-close`	Hide notification after `duration` only not programmatic	Boolean	—	`false`
`duration`	Visibility duration in miliseconds	Number	—	`2000`
`icon-pack`	Icon pack to use	String	`mdi`, `fa`, `fas`, `far`, `fad`, `fal`	`mdi`
`has-icon`	Adds an icon on the left side depending on the `type`	Boolean	—	`false`
`aria-close-label`	Label for the close button, to be read by accessibility screenreaders.	String	—	—
`message`	Message text	String	—	—
`position`	Which position the notification will appear when programmatically	String	`is-top-right`, `is-top`, `is-top-left`, `is-bottom-right`, `is-bottom`, `is-bottom-left`	`is-bottom-right`
`queue`	If should queue with others notices (snackbar/toast/notification)	Boolean	—	`true`
`indefinite`	Show the Notification indefinitely until it is dismissed when programmatically	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`.	String	—	`body`

Name	Description	Parameters
`close`	Triggers when user closes the notification	—

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

Improve this page on GitHub