Notification

The Notification component is a lightweight and easily customizable alert message. It is designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.

Examples

Base

Show code

HTML

<section>
    <o-notification closable 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
    </o-notification>
</section>

Variants

Different styles can be achieved with the variant prop.

Show code

HTML

<section class="odocs-spaced">
    <o-notification
        closable
        variant="primary"
        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
    </o-notification>

    <o-notification
        closable
        variant="secondary"
        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
    </o-notification>

    <o-notification
        closable
        variant="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
    </o-notification>

    <o-notification
        closable
        variant="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
    </o-notification>

    <o-notification
        closable
        variant="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
    </o-notification>

    <o-notification
        closable
        variant="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
    </o-notification>
</section>

Use types

The type prop in combination with the variant prop adds specific icons to the notification.

Show code

HTML

<section>
    <o-notification
        closable
        type="success"
        variant="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
    </o-notification>

    <o-notification
        closable
        type="info"
        variant="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
    </o-notification>

    <o-notification
        closable
        type="warning"
        variant="warning"
        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
    </o-notification>

    <o-notification
        closable
        type="danger"
        variant="danger"
        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
    </o-notification>
</section>

Add custom buttons

Show code

HTML

<section>
    <o-notification
        v-slot="{ close }"
        aria-close-label="Close notification">
        <div class="notification-content">
            <span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Fusce id fermentum quam. Proin sagittis, nibh id hendrerit
                imperdiet, elit sapien laoreet elit
            </span>
            <o-button
                label="Cancel"
                variant="primary"
                size="small"
                @click="close" />
        </div>
    </o-notification>
</section>

SCSS

.notification-content {
    display: flex;
}

Programmatically

This component provides a programmatic interface that can be accessed by the useOruga() composable.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-button
            label="Launch notification (default)"
            size="medium"
            @click="simple" />
        <o-button
            label="Launch notification (custom)"
            variant="success"
            size="medium"
            @click="success" />
    </p>

    <p>
        <o-button label="Launch toast" size="medium" @click="toast" />
        <o-button
            label="Launch toast (queued)"
            variant="success"
            size="medium"
            @click="queueToast" />
    </p>

    <p>
        <o-button
            label="Launch notification (custom)"
            variant="danger"
            size="medium"
            @click="danger" />
        <o-button
            label="Launch notification (component)"
            variant="warning"
            size="medium"
            @click="component" />
    </p>
</section>

JS

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

const oruga = useOruga();

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

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

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

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

function danger(): void {
    oruga.notification.open({
        duration: 5000,
        // here we use a render function to create an inline component (https://vuejs.org/guide/extras/render-function)
        component: h("div", [
            "Something's not good, also I'm on ",
            h("b", "bottom"),
        ]),
        position: "bottom-right",
        variant: "danger",
        closable: true,
        onClose: () => {
            oruga.notification.open("Custom notification closed!");
        },
    });
}

async function component(): Promise<void> {
    const instance = oruga.notification.open({
        component: NotificationForm,
        position: "bottom-right",
        variant: "warning",
        infinite: true,
    });

    // wait until the notification got closed
    const result = await instance.promise;

    oruga.notification.open({
        duration: 5000,
        message: "Modal dialog returned " + JSON.stringify(result),
        variant: "info",
        position: "top",
        closable: 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;
}

Notification component

Bold notification blocks to alert your users of something.

<o-notification></o-notification>

Props

Prop name	Description	Type	Values	Default
active	Whether modal is active or not, use v-model:active to make it two-way binding	boolean	-	true
animation	Custom animation (transition name)	string	-	From config: notification: {   animation: "fade" }
ariaCloseLabel	Accessibility label for the close button	string	-	From config: notification: {   ariaCloseLabel: "Close" }
closable	Add close button to the item that closes the notification	boolean	-	false
closeIcon	Close icon name	string	-	From config: notification: {   closeIcon: "close" }
closeIconSize	Size of close icon	string	small, medium, large	From config: notification: {   closeIconSize: undefined }
icon	Icon name to use	string	-
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: notification: {   iconPack: undefined }
iconSize	Icon size	string	small, medium, large	From config: notification: {   iconSize: "large" }
message	Message text, unnecessary when default slot is used	string	-
override	Override existing theme classes completely	boolean	-
position	Which position the notification will appear when programmatically	"bottom-left" | "bottom-right" | "bottom" | "top-left" | "top-right" | "top"	top-right, top, top-left, bottom-right, bottom, bottom-left	From config: notification: {   position: "top" }
type	Type (color) of the notification	string	info, success, warning, danger
variant	Color of the control	string	primary, info, success, warning, danger, and any other custom color	From config: notification: {   variant: undefined }

Events

Event name	Properties	Description
update:active	value boolean - updated active prop	active prop two-way binding
close	value unknown - close event data	on component close event

Slots

Name	Description	Bindings
inner	Notification inner content, outside of the message container	close (...args): void - function to close the notification
default	Notification default content, default is message prop	close (...args): void - function to close the notification

NotificationNotice component

Notification Notice is an extension of the Notification component and is used for the programmatic usage.

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

Props

Prop name	Description	Type	Values	Default
component	Component to be injected. Close the component by emitting a 'close' event — $emit('close')	Component	-
duration	Hide notification after duration (in miliseconds)	number	-	From config: notification: {   duration: 2000 }
events	Events to be binded to the injected component	{}	-
infinite	Show the Notification infinitely until it is dismissed.	boolean	-	false
override	Override existing theme classes completely	boolean	-
position	Which position the notification will appear.	"bottom-left" | "bottom-right" | "bottom" | "top-left" | "top-right" | "top"	top-right, top, top-left, bottom-right, bottom, bottom-left	From config: notification: {   position: "top" }
props	Props to be binded to the injected component	any	-
queue	If notice should queue with others notices (snackbar/toast/notification).	boolean	-	From config: notification: {   queue: undefined }
variant	Color of the control	string	primary, info, success, warning, danger, and any other custom color	From config: notification: {   variant: undefined }

Events

Event name	Properties	Description
close	value unknown - close event data	on component close event

Slots

Name	Description	Bindings
default

Class Inspector

Classes applied to the element:

How does the Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element. 👉 You have to declare a class when override mode.
positionClass	Class of the root 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
variantClass	Class of the root element with variant.	variant	primary info warning danger
wrapperClass	Class of the wrapper element.
iconClass	Class of the icon element on the left.	type
contentClass	Class of the content element.
closeClass	Class of the close button element.	closable
noticeClass	Class of the notice wrapper element.
noticePositionClass	Class of the notice wrapper element when positioned.	position	top-right top top-left bottom-right bottom bottom-left
noticeContainerClass	Class of the notice container element.

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$notification-background-color	var(--#{$prefix}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	var(--#{$prefix}white)
$notification-close-border-radius	var( --#{$prefix}base-border-radius-rounded)
$notification-close-right	0.5rem
$notification-close-top	0.5rem
$notification-close-size	20px
$notification-close-color	var(--#{$prefix}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-z	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