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

# Base

# Use types

# Add custom buttons

# 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 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: 'times'
}
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 -
duration Visibility duration in miliseconds. number -
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 - undefined
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