Notification/Toast

Bold notification blocks to alert your users of something

---

edit on github

Examples

Programmatically opening

Go to Notification Notice section to see all the available options.

<template>
  <section>
    <div class="buttons">
      <o-button label="Launch notification (default)" size="medium" @click="simple" />
      <o-button label="Launch notification (custom)" variant="success" size="medium" @click="success" />
      <hr />
      <o-button label="Launch toast" size="medium" @click="toast" />
      <o-button label="Launch toast (queued)" variant="success" size="medium" @click="queueToast" />
      <hr />
      <o-button label="Launch notification (custom)" variant="danger" size="medium" @click="danger" />
      <o-button label="Launch notification (component)" variant="warning" size="medium" @click="component" />
      <hr />
      <o-button label="Launch with promise" size="medium" @click="promise" />
      <o-button label="Launch indefinite" size="medium" @click="indefinite" />
      <o-button label="Close all open" size="medium" @click="closeAll" />
    </div>
  </section>
</template>

<script>
  const NotificationForm = {
    props: ['email', 'password'],
    template: `
                <form action="">
                    <div class="modal-card" style="width: auto">
                        <header class="modal-card-head">
                            <p class="modal-card-title">Login</p>
                        </header>
                        <section class="modal-card-body">
                            <o-field label="Email">
                                <o-input
                                    type="email"
                                    :value="email"
                                    placeholder="Your email"
                                    required>
                                </o-input>
                            </o-field>

                            <o-field label="Password">
                                <o-input
                                    type="password"
                                    :value="password"
                                    password-reveal
                                    placeholder="Your password"
                                    required>
                                </o-input>
                            </o-field>

                            <o-field>
                                <o-checkbox>Remember me</o-checkbox>
                            </o-field>
                        </section>
                        <footer class="modal-card-foot">
                            <o-button type="button" @click="$emit('close')">Close</o-button>
                            <o-button variant="primary">Login</o-button>
                        </footer>
                    </div>
                </form>
            `
  }
  export default {
    methods: {
      simple() {
        this.$oruga.notification.open('Something happened')
      },
      success() {
        this.$oruga.notification.open({
          message: 'Something happened correctly!',
          variant: 'success',
          closable: true
        })
      },
      toast() {
        this.$oruga.notification.open({
          message: 'Something happened correctly!',
          rootClass: 'toast-notification',
          position: 'top'
        })
      },
      queueToast() {
        this.$oruga.notification.open({
          message: 'Something happened correctly!',
          rootClass: 'toast-notification',
          position: 'top',
          queue: true
        })
      },
      danger() {
        const notif = this.$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: () => {
            this.$oruga.notification.open('Custom notification closed!')
          }
        })
      },
      component() {
        this.$oruga.notification.open({
          // parent is only for Vue2. in Vue 3 omit this option
          parent: this,
          component: NotificationForm,
          position: 'bottom-right',
          variant: 'warning',
          indefinite: true
        })
      },
      async promise() {
        const instance = this.$oruga.notification.open({
          message: "Notification with promise response. The promise returns how the notification was closed. (value from $emit('close', value)",
          position: 'top',
          variant: 'info',
          duration: 5000,
          closable: true
        })

        // Note utilizing the promise requires Promise be supported by the browser
        // If you are running Vue 2 on IE 11 this will not be the case unless you
        // add a polyfill in your build.
        const ret = await instance.promise

        this.$oruga.notification.open({
          message: 'Notification was resolved with ' + JSON.stringify(ret),
          position: 'top',
          variant: 'success',
          duration: 2000
        })
      },
      indefinite() {
        this.$oruga.notification.open({
          message: 'Indefinite sticky notification',
          closable: true,
          indefinite: true
        })
      },
      closeAll() {
        // any parameter here is passed to the onClose handler and resolved to the promise
        // for each open notification
        this.$oruga.notification.closeAll({ action: 'closeAll' })
      }
    }
  }
</script>
<style>
  .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;
  }
</style>

Base

<template>
  <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>
    <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>
</template>
<script>
  export default {}
</script>

Use types

<template>
  <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>
</template>
<script>
  export default {}
</script>

Add custom buttons

<template>
  <section>
    <o-notification aria-close-label="Close notification" v-slot="{closeNotification}">
      <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" size="small" @click="closeNotification" />
      </div>
    </o-notification>
  </section>
</template>
<script>
  export default {}
</script>
<style>
  .notification-content {
    display: flex;
  }
</style>

Class props

📄 Full scss file

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

How does 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.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

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. You'll find more info in the "Overriding section".

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.
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.	position	top-right top top-left bottom-right bottom bottom-left
rootClass	Class of the root element.
variantClass	Class of the notification variant.	variant	primary info warning danger
wrapperClass	Class of the wrapper element.

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	Override classes	boolean	-	false
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

---

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	Override classes	boolean	-	false
position	Which position the notification will appear when programmatically.	string	top-right, top, top-left, bottom-right, bottom, bottom-left	'top'
queue	If should queue with others notices (snackbar/toast/notification).	boolean	-	From config notification: {   noticeQueue: false }
type	Type (color) of the notification, optional.	string	-

Events

Event name	Properties	Description
close

Slots

Name	Description	Bindings
default

Style

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