Skip to content

Notification

Bold notification blocks to alert your users of something

Examples

Base

Show code

Variants

Show code

Use types

Show code

Add custom buttons

Show code

Programmatically opening

Show code

Class props

'Classes applied to the element'

Notification component

Bold notification blocks to alert your users of something

html
<o-notification></o-notification>

Props

Prop nameDescriptionTypeValuesDefault
activeWhether modal is active or not, use v-model:active to make it two-way bindingboolean-true
animationCustom animation (transition name)string-
From config:
notification: {
  animation: "fade"
}
ariaCloseLabelAccessibility label for the close buttonstring-
From config:
notification: {
  ariaCloseLabel: "Close"
}
closableAdd close button to the item that closes the notificationboolean-false
closeIconClose icon namestring-
From config:
notification: {
  closeIcon: "close"
}
closeIconSizeSize of close iconstringsmall, medium, large
From config:
notification: {
  closeIconSize: undefined
}
iconIcon name to usestring-
iconPackIcon pack to usestringmdi, fa, fas and any other custom icon pack
From config:
notification: {
  iconPack: undefined
}
iconSizeIcon sizestringsmall, medium, large
From config:
notification: {
  iconSize: "large"
}
messageMessage text (can contain HTML), unnecessary when default slot is usedstring | string[]-
overrideOverride existing theme classes completelyboolean-
positionWhich position the notification will appear when programmaticallystringtop-right, top, top-left, bottom-right, bottom, bottom-left
From config:
notification: {
  position: "top"
}
typeType (color) of the notificationstringinfo, success, warning, danger
variantColor of the controlstringprimary, info, success, warning, danger, and any other custom color
From config:
notification: {
  variant: undefined
}

Events

Event namePropertiesDescription
update:activevalue boolean - updated active propactive prop two-way binding
closevalue any - close event dataon component close event

Slots

NameDescriptionBindings
innerNotification inner content, outside of the message containerclose (...args): void - function to close the notification
defaultNotification default content, default is message propclose (...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

html
<o-notification-notice></o-notification-notice>

Props

Prop nameDescriptionTypeValuesDefault
componentComponent to be injected.
Close notification within the component by emitting a 'close' event — $emit('close').
Component-
containerDOM 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"
}
durationHide notification after duration (in miliseconds)number-
From config:
notification: {
  duration: 2000
}
eventsEvents to be binded to the injected component.object-{}
infiniteShow the Notification infinitely until it is dismissed.boolean-false
onCloseCallback function to call on close (programmatically close or user canceled).() => void-Default function (see source code)
overrideOverride existing theme classes completelyboolean-
positionWhich position the notification will appear.stringtop-right, top, top-left, bottom-right, bottom, bottom-left
From config:
notification: {
  position: "top"
}
propsProps to be binded to the injected component.object-
queueIf notice should queue with others notices (snackbar/toast/notification).boolean-
From config:
notification: {
  queue: undefined
}

Slots

NameDescriptionBindings
default

Sass variables

Current theme ➜ Oruga

SASS VariableDefault
$notification-background-colorvar(--#{$prefix}primary)
$notification-border-radius4px
$notification-padding1.75em 1.75em
$notification-margin-bottom1.5rem
$notification-animantionappend-animate 0.3s linear
$notification-colorvar(--#{$prefix}white)
$notification-close-border-radiusvar( --#{$prefix}base-border-radius-rounded)
$notification-close-right0.5rem
$notification-close-top0.5rem
$notification-close-size20px
$notification-close-colorvar(--#{$prefix}white)
$notification-close-background-colorhsla(0, 0%, 4%, 0.2)
$notification-icon-margin-right1rem
$notification-notices-padding2em
$notification-notices-zindex1000

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS VariableDefault
$notification-margin-bottom1.5rem
$notification-notices-padding2em
$notification-notices-zindex1000

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS VariableDefault
$notification-close-btn-position1rem
$notification-notices-padding2em
$notification-notices-zindex$zindex-toast
$notification-notices-max-width600px
$notification-notices-space1.5rem
$notification-icon-margin-right0.5rem

See ➜ 📄 Full scss file

Released under the MIT License.