Notification

Bold notification blocks to alert your users of something

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

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="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="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="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

Show code

HTML

<section>
    <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>
</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 opening

Show code

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>

JS

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,
        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!");
        },
    });
}

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

Class props

'Classes applied to the element'

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 (can contain HTML), unnecessary when default slot is used	string | string[]	-
override	Override existing theme classes completely	boolean	-
position	Which position the notification will appear when programmatically	string	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 any - 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 notification within the component by emitting a 'close' event — $emit('close').	Component	-
container	DOM element the toast will be created on (for programmatic usage). Note that this also changes the position of the toast from fixed to absolute. Meaning that the container should be fixed.	string | HTMLElement | null	-	From config: notification: {   container: "body" }
duration	Hide notification after duration (in miliseconds)	number	-	From config: notification: {   duration: 2000 }
events	Events to be binded to the injected component.	object	-	{}
infinite	Show the Notification infinitely until it is dismissed.	boolean	-	false
onClose	Callback function to call on close (programmatically close or user canceled).	() => void	-	Default function (see source code)
override	Override existing theme classes completely	boolean	-
position	Which position the notification will appear.	string	top-right, top, top-left, bottom-right, bottom, bottom-left	From config: notification: {   position: "top" }
props	Props to be binded to the injected component.	object	-
queue	If notice should queue with others notices (snackbar/toast/notification).	boolean	-	From config: notification: {   queue: undefined }

Slots

Name	Description	Bindings
default

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