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>
        <b-button
            label="Toggle"
            class="block"
            @click="isActive = !isActive" />
        <b-notification 
            v-model="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

Many colors with light variant.

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-info is-light" 
            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-success is-light" 
            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-warning is-light"
            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>
        <b-notification
            type="is-danger is-light"
            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>

        <b-notification
            type="is-dark"
            has-icon
            icon="account"
            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>
        <b-button
            label="Show"
            :disabled="isActive"
            @click="isActive = true" />
        <b-notification
            auto-close 
            type="is-danger"
            v-model="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>

# Auto Close With Progress Bar

Notification will be automatically closed after duration with a progress bar which indicates the delay passed.

<template>
    <section>
        <b-button
            label="Show"
            :disabled="isActive"
            @click="isActive = true" />
        <b-notification 
            auto-close 
            :progress-bar='progressBar' 
            :duration="duration" 
            title="Error!" 
            type="is-dark" 
            has-icon 
            v-model="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,
                duration: 4000,
                progressBar: true
            }
        }
    }
</script>

# Programmatically opening

Since0.7.4

<template>
    <section>
        <div class="buttons">
            <b-button
                label="Launch notification (default)"
                size="is-medium"
                @click="simple" />
            <b-button
                label="Launch notification (custom)"
                type="is-success"
                size="is-medium"
                @click="success" />
            <b-button
                label="Launch notification (custom)"
                type="is-danger"
                size="is-medium"
                @click="danger" />
            <b-button
                label="Launch notification (pause on hover)"
                type="is-link"
                size="is-medium"
                @click="pause" />
            <b-button
                label="Launch notification (shows remaining time in progress)"
                type="is-primary"
                size="is-medium"
                @click="progress" />
        </div>
    </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 <b>bottom</b>`,
                    position: 'is-bottom-right',
                    type: 'is-danger',
                    hasIcon: true
                })
                notif.$on('close', () => {
                    this.$buefy.notification.open('Custom notification closed!')
                })
            },
            pause() {
                this.$buefy.notification.open({
                    message: `I can be paused if you hover over me`,
                    type: 'is-link',
                    pauseOnHover: true,
                })
            },
            progress() {
                this.$buefy.notification.open({
                    message: `I can show you a little progress bar displaying the remaining time!`,
                    duration: 5000,
                    progressBar: true,
                    type: 'is-primary',
                    pauseOnHover: true
                })
            },
        }
    }
</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
`v-model`	Active state - set on `true` to reopen after close	Boolean	—	true
`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`	Boolean	—	`false`
`duration`	Visibility duration in miliseconds	Number	—	`2000`
`progress-bar`	remaining seconds before the alert will close (in seconds)	Boolean	—	`false`
`animation`	Custom animation (transition name)	String	—	`fade`
`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` (or the `icon` prop if defined)	Boolean	—	`false`
`icon`	Icon name to use with `has-icon`	Boolean	—	—
`icon-size`	Size of the icon, optional	String	`is-small`, `is-medium`, `is-large`	Depends on `size` prop
`aria-close-label`	Label for the close button, to be read by accessibility screenreaders.	String	—	—
`message`	Message 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.	String, Array	—	—
`position`	Which position the notification will appear when opened programmatically	String	`is-top-right`, `is-top`, `is-top-left`, `is-bottom-right`, `is-bottom`, `is-bottom-left`	`is-top-right`
`queue`	If should queue with others notices (snackbar/toast/notification)	Boolean	—	`true`
`indefinite`	Show the Notification indefinitely until it is dismissed when opened programmatically	Boolean	—	`false`
`pause-on-hover`	Pause and show on hover until hover off when opened programmatically, if indefinite is false.	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	—
`click`	Triggers when user clicks the notification	—

# Variables

You can use these variables to customize this component.

Name	Default
Bulma variables	Link

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

Improve this page on GitHub