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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
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
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,
                    onClose: () => {
                        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 '@fantage9/buefy-vue3'
Notification.open('Notify!')
                

# API

Name
Description
Type
Values
Default
v-modelWhether notification is active or not, use the modelValue property to make it one-way bindingBooleantrue
typeType (color) of the notification, optionalStringis-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
closableAdds an 'X' button that closes the notificationBooleantrue
auto-closeHide notification after duration only not programmaticBooleanfalse
durationVisibility duration in milisecondsNumber2000
progress-barremaining seconds before the alert will close (in seconds)Booleanfalse
animationCustom animation (transition name)Stringfade
icon-packIcon pack to useStringmdi, fa, fas, far, fad, falmdi
has-iconAdds an icon on the left side depending on the type (or the icon prop if defined)Booleanfalse
iconIcon name to use with has-iconBoolean
icon-sizeSize of the icon, optionalStringis-small, is-medium, is-largeDepends on size prop
aria-close-labelLabel for the close button, to be read by accessibility screenreaders.String
messageMessage 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
positionWhich position the notification will appear when opened programmaticallyStringis-top-right, is-top, is-top-left, is-bottom-right, is-bottom, is-bottom-leftis-top-right
queueIf should queue with others notices (snackbar/toast/notification)Booleantrue
indefiniteShow the Notification indefinitely until it is dismissed when opened programmaticallyBooleanfalse
pause-on-hoverPause and show on hover until hover off when opened programmatically, if indefinite is false.Booleanfalse
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.Stringbody

# Variables

You can use these variables to customize this component.

Name
Default
Bulma variablesLink