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

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	"top" | "bottom" | "top-right" | "top-left" | "bottom-left" | "bottom-right"	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			-
duration			-	From config: notification: {   duration: 2000 }
events			-
infinite			-	false
override			-
position			-	From config: notification: {   position: "top" }
props			-
queue			-	From config: notification: {   queue: undefined }

Events

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

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