Notification

Bold notification blocks to alert your users of something

Examples

Base

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

Show code

Variants

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

Show code

Use types

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

Show code

Add custom buttons

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

Show code

Programmatically opening

Show code

HTMLJSSCSS

html

<section>
    <div class="odocs-spaced">
        <o-button
            label="Launch notification (default)"
            size="medium"
            @click="simple" />
        <o-button
            label="Launch notification (custom)"
            variant="success"
            size="medium"
            @click="success" />
    </div>
    <div class="odocs-spaced">
        <o-button label="Launch toast" size="medium" @click="toast" />
        <o-button
            label="Launch toast (queued)"
            variant="success"
            size="medium"
            @click="queueToast" />
    </div>
    <div class="odocs-spaced">
        <o-button
            label="Launch notification (custom)"
            variant="danger"
            size="medium"
            @click="danger" />
        <o-button
            label="Launch notification (component)"
            variant="warning"
            size="medium"
            @click="component" />
    </div>
</section>

html

import { useProgrammatic } from "@oruga-ui/oruga-next";
import NotificationForm from "./_notification-form.vue";

const { oruga } = useProgrammatic();

function simple() {
    oruga.notification.open("Something happened");
}

function success() {
    oruga.notification.open({
        message: "Something happened correctly!",
        variant: "success",
        closable: true,
    });
}

function toast() {
    oruga.notification.open({
        message: "Something happened correctly!",
        rootClass: "toast toast-notification",
        position: "top",
    });
}

function queueToast() {
    oruga.notification.open({
        message: "Something happened correctly!",
        rootClass: "toast toast-notification",
        position: "top",
        queue: true,
    });
}

function danger() {
    oruga.notification.open({
        duration: 5000,
        message: `Something's not good, also I'm on <b>bottom</b>`,
        position: "bottom-right",
        variant: "danger",
        closable: true,
        onClose: () => {
            oruga.notification.open("Custom notification closed!");
        },
    });
}

function component() {
    oruga.notification.open({
        component: NotificationForm,
        position: "bottom-right",
        variant: "warning",
        indefinite: true,
    });
}

scss

.toast-notification {
    margin: 0.5em 0;
    text-align: center;
    box-shadow: 0 1px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
    border-radius: 2em;
    padding: 0.75em 1.5em;
    pointer-events: auto;
    color: rgba(0, 0, 0, 0.7);
    background: #ffdd57;
}

Class props

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

How does the Class props inspector work?

Class prop	Description	Props	Suffixes
closeClass	Class of the close button container.	`closable`
contentClass	Class of the content element.
iconClass	Class of the icon on the left.	`type`
noticeClass	Root class of the notice.
noticeCustomContainerClass	Class of the custom container element.
noticePositionClass	Class of the notice when positioned.	`position`	`top-right top top-left bottom-right bottom bottom-left`
positionClass	Class of the element when positioned. 👉 You have to declare a class for top and bottom position when override mode	`position`	`top-right top top-left bottom-right bottom bottom-left`
rootClass	Class of the root element. 👉 You have to declare a class when override mode
variantClass	Class of the notification variant.	`variant`	`primary info warning danger`
wrapperClass	Class of the wrapper element.

Notification component

html

<o-notification></o-notification>

Props

Prop name	Description	Type	Values	Default
active	Whether modal is active or not, use the .sync modifier (Vue 2.x) or v-model:active (Vue 3.x) to make it two-way binding	boolean	-	true
animation	Custom animation (transition name).	string	-	'fade'
ariaCloseLabel	Label for the close button, to be read by accessibility screenreaders.	string	-
autoClose	Hide notification after duration only not programmatic.	boolean	-	false
closable	Adds an 'X' button that closes the notification.	boolean	-	false
closeIcon	Close icon name	string	-	From config: `notification: { closeIcon: 'close' }`
closeIconSize	Size of close icon	string	-	'small'
component	Component to be injected, used to open a component modal programmatically. Close modal within the component by emitting a 'close' event — this.$emit('close')	object\|func	-
duration	Visibility duration in miliseconds.	number	-	2000
events	Events to be binded to the injected component	object	-	{}
hasIcon	Adds an icon on the left side depending on the type (or the icon prop if defined).	boolean	-
icon	Icon name to use with has-icon.	string	-
iconPack	Icon pack to use.	string	-
iconSize	Icon size	string	-	'large'
message	Message text (can contain HTML).	string	-
override		boolean	-
position	Which position the notification will appear when programmatically	string	`top-right`, `top`, `top-left`, `bottom-right`, `bottom`, `bottom-left`
props	Props to be binded to the injected component	object	-
type	Type (color) of the notification, optional.	string	-
variant	Color of the control, optional	string\|object	`primary`, `info`, `success`, `warning`, `danger`, `and any other custom color`

Events

Event name	Properties	Description
close
update:active

Slots

Name	Description	Bindings
default

NotificationNotice component

html

<o-notification-notice></o-notification-notice>

Props

Prop name	Description	Type	Values	Default
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	-	From config: `notification: { containerElement: undefined }`
duration	Visibility duration in miliseconds.	number	-	From config: `notification: { duration: 1000 }`
indefinite	Show the Notification indefinitely until it is dismissed when programmatically.	boolean	-	false
message	Message text (can contain HTML).	string\|array	-
onClose	Callback function to call after close (programmatically close or user canceled)	func	-	Default function (see source code)
override		boolean	-
position	Which position the notification will appear when programmatically.	string	`top-right`, `top`, `top-left`, `bottom-right`, `bottom`, `bottom-left`	'top'
programmatic		object	-
promise		Promise	-
propsNotification		object	-
queue	If should queue with others notices (snackbar/toast/notification).	boolean	-	From config: `notification: { noticeQueue: undefined }`
type	Type (color) of the notification, optional.	string	-

Events

Event name	Properties	Description
close
update:active

Slots

Name	Description	Bindings
default

Sass variables

Current theme ➜ Oruga Base

SASS Variable	Default
$notification-background-color	$primary
$notification-border-radius	4px
$notification-padding	1.75em 1.75em
$notification-margin-bottom	1.5rem
$notification-animantion	append-animate 0.3s linear
$notification-color	$white
$notification-close-border-radius	$base-rounded-border-radius
$notification-close-right	0.5rem
$notification-close-top	0.5rem
$notification-close-size	20px
$notification-close-color	$white
$notification-close-background-color	hsla(0, 0%, 4%, 0.2)
$notification-icon-margin-right	1rem
$notification-notices-padding	2em
$notification-notices-zindex	1000

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS Variable	Default
$notification-background-color	$primary
$notification-border-radius	4px
$notification-padding	1.75em 1.75em
$notification-margin-bottom	1.5rem
$notification-animantion	append-animate 0.3s linear
$notification-color	$white
$notification-close-border-radius	$base-rounded-border-radius
$notification-close-right	0.5rem
$notification-close-top	0.5rem
$notification-close-size	20px
$notification-close-color	$white
$notification-close-background-color	hsla(0, 0%, 4%, 0.2)
$notification-icon-margin-right	1rem
$notification-notices-padding	2em
$notification-notices-zindex	1000

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS Variable	Default
$notification-margin-bottom	1.5rem
$notification-notices-padding	2em
$notification-notices-zindex	1000

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS Variable	Default
$notification-close-btn-position	1rem
$notification-notices-padding	2em
$notification-notices-zindex	$zindex-toast
$notification-notices-max-width	600px
$notification-notices-space	1.5rem
$notification-icon-margin-right	0.5rem

See ➜ 📄 Full scss file

Notification ​

Examples ​

Base

Variants

Use types

Add custom buttons

Programmatically opening

Class props ​

Class prop

Description

Props

Suffixes

Notification component ​

Props ​

Events ​

Slots ​

NotificationNotice component ​

Props ​

Events ​

Slots ​

Sass variables ​

Notification

Examples

Class props

Notification component

Props

Events

Slots

NotificationNotice component

Props

Events

Slots

Sass variables