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

When a dialogue box seems a bit overkill for the task, notifications are a good way to display a simple message to inform the user.

Show code

HTML

<section>
    <o-notification closeable 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
        closeable
        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
        closeable
        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
        closeable
        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
        closeable
        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
        closeable
        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
        closeable
        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
        closeable
        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
        closeable
        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
        closeable
        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
        closeable
        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. The composable can be used from outside the Vue instance. For example, it can be used in Pinia or Vue Router with this syntax:

    import { useOruga } from "@oruga-ui/oruga-next";
    const oruga = useOruga();
    oruga.notification.open('Notify!');
        

Show code

HTML

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

JS

import { h } from "vue";
import { useOruga } from "@oruga-ui/oruga-next";

const oruga = useOruga();

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

function success(): void {
    oruga.notification.open({
        message: "Something happened correctly!",
        variant: "success",
        closeable: 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",
        variant: "danger",
        type: "danger",
        closeable: true,
        onClose: () => {
            oruga.notification.open("Custom notification closed!");
        },
    });
}

function pause(): void {
    oruga.notification.open({
        message: `I can be paused if you hover over me`,
        variant: "warning",
        type: "warning",
        pauseOnHover: 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;
}

Toasts are lightweight notifications designed to resemble the push notifications popularised by mobile and desktop operating systems. They should consist of simple text only and be queued so as not to overwhelm the user.

Show code

HTML

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

    <p>
        <o-button
            label="Launch toast (queued)"
            variant="primary"
            size="medium"
            @click="queueToast" />
        <o-button
            label="Launch toast (pause on hover)"
            variant="secondary"
            size="medium"
            @click="pause" />
        <o-button
            label="Launch toast (infinite)"
            variant="warning"
            size="medium"
            @click="infinite" />
        <o-button
            v-if="infiniteToast"
            label="close toast (infinite)"
            variant="danger"
            size="medium"
            @click="closeIndefinite" />
    </p>
</section>

JS

import { h, ref } from "vue";
import { useOruga, type ProgrammaticExpose } from "@oruga-ui/oruga-next";

const oruga = useOruga();

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

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

function danger(): void {
    oruga.notification.open({
        rootClass: "toast toast-notification",
        // 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",
        variant: "danger",
        queue: true,
        rounded: true,
        duration: 5000,
    });
}

function queueToast(): void {
    oruga.notification.open({
        rootClass: "toast toast-notification",
        message: "Current time: " + Date.now(),
        position: "top",
        queue: true,
        rounded: true,
    });
}

function pause(): void {
    oruga.notification.open({
        rootClass: "toast toast-notification",
        message: `I can be paused if you hover over me`,
        variant: "warning",
        pauseOnHover: true,
        duration: 5000,
        queue: true,
        rounded: true,
    });
}

const infiniteToast = ref<ProgrammaticExpose>();

function infinite(): void {
    infiniteToast.value = oruga.notification.open({
        rootClass: "toast toast-notification",
        message: `I won't close until you explicitly close me!`,
        variant: "warning",
        type: "warning",
        infinite: true,
        closeable: true,
        rounded: true,
    });

    // cleanup ref after toast got closed
    infiniteToast.value.promise.then(() => {
        infiniteToast.value = undefined;
    });
}

function closeIndefinite(): void {
    // close infinite toast
    if (infiniteToast.value) infiniteToast.value.close();
}

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;
}

For a more advanced experience, you can also pass any custom component via the component prop.

Show code

HTML

<section class="odocs-spaced">
    <o-button
        label="Launch component notification (form)"
        variant="primary"
        size="medium"
        @click="component" />
</section>

JS

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

const oruga = useOruga();

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",
        closeable: 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" }
closeIcon	Close icon name	string	-	From config: notification: {   closeIcon: "close" }
closeIconSize	Size of close icon	string	small, medium, large	From config: notification: {   closeIconSize: undefined }
closeable	Add close button to close the item	boolean	-	false
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" }
rounded	Enable rounded style	boolean	-	From config: notification: {   rounded: undefined }
type	Type (color) of the notification	string	info, success, warning, danger
variant	Color variant 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	event Event - native event	on component close event

Slots

Name	Description	Bindings
close	Define a custom close icon
inner	Notification inner content, outside of the message container	close (...args: [] | [Event]): void - function to close the notification
default	Notification default content, default is message prop	close (...args: [] | [Event]): 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')	C	-
duration	Hide notification after duration (in miliseconds)	number	-	From config: notification: {   duration: 2000 }
events	Events to be binded to the injected component	EmitsToProps<ComponentEmit<C>>	-
infinite	Show the Notification infinitely until it is dismissed.	boolean	-	false
override	Override existing theme classes completely	boolean	-
pauseOnHover	Pause and show on hover until hover off, if infinite is false.	boolean	-	false
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	ComponentProps<C>	-
queue	If notice should queue with others notices.	boolean	-	From config: notification: {   queue: undefined }
variant	Color variant 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	event Event - native event	on component close event

Slots

Name	Description	Bindings
default

Class Inspector

Classes applied to the element:

➜ Want to know how does the Class 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
roundedClass	Class of the root element when rounded.	rounded
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.	closeable
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-spacer	calc(2 * h.useVar("control-spacer"))
$notification-padding	1.75em 1.75em
$notification-animation	append-animate h.useVar("animation-speed") linear
$notification-color	h.useVar("primary-invert")
$notification-background-color	h.useVar("primary")
$notification-border-radius	h.useVar("border-radius")
$notification-close-top	0.5em
$notification-close-right	0.5em
$notification-close-color	h.useVar("white")
$notification-close-size	1.5rem
$notification-close-border-radius	h.useVar("border-radius-rounded")
$notification-close-background-color	h.useVar("control-shadow-color")
$notification-notices-padding	2em
$notification-notices-max-width	600px
$notification-notices-zindex	map.get(vars.$zindex, "tooltip")

See ➜ 📄 SCSS file

Current theme ➜ Bulma

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

See ➜ 📄 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 ➜ 📄 SCSS file