Notification

Try It

This shortcode has been elminated and replaced with a newer one. This page is yet to be updated but will be shortly.

Class Reference

Toast.Notification inherits from Component

Properties

AnimateInside

Type: Bool
Default: true

BackGroundColor

Type: String
Default: ''

Background color of the Toast.

Balloon

Type: Bool
Default: false

Applies a balloon like toast.

Close

Type: Bool
Default: true

Show "x" close button.

CloseOnClick

Type: Bool
Default: false

Allows to close toast clicking on it.

CloseOnEscape

Type: Bool
Default: false

Allows to close toast using the Esc key.

Color

Type: String
Default: ''

It can be #hexadecimal, pre-defined themes like blue, red, green and yellow or set another class. Create and use like this ".iziToast-color-name".

Drag

Type: Bool
Default: true

Icon

Type: String
Default: ''

Icon class (font-icon of your choice, <a href="https://icomoon.io/" target="blank" rel="noopener noreferrer">Icomoon</a>, <a href="https://fontawesome.com/?from=io" target="blank" rel="noopener noreferrer">Fontawesome</a> etc.).

IconColor

Type: String
Default: ''

Icon color.

IconText

Type: String
Default: ''

Icon text (font-icon using text, <a href="https://material.io/tools/icons/" target="blank" rel="noopener noreferrer">Material Icons</a>, etc.).

Image

Type: String
Default: ''

Cover image.

ImageWidth

Type: Int
Default: 50

Width of cover image.

Layout

Type: Int
Default: 1

It can be 1 or 2, or use another layout, creating the class like this: ".iziToast-layout3".

MaxWidth

Type: Int
Default: null

Set max Width of toast.

Message

Type: String
Default: ''

Message of notification.

MessageColor

Type: String
Default: ''

Message color.

MessageLineHeight

Type: String
Default: ''

Message line Height.

MessageSize

Type: String
Default: ''

Message font Size.

Overlay

Type: Bool
Default: false

Enables display the Overlay layer on the page.

OverlayClose

Type: Bool
Default: false

Allows to close toast clicking on the Overlay.

OverlayColor

Type: String
Default: rgba(0, 0, 0, 0.6)

Overlay background color.

PauseOnHover

Type: Bool
Default: true

Pause the toast timeout while the cursor is on it.

Position

Type: Enum
Default: BottomRight
Values: BottomRight, BottomLeft, TopRight, TopLeft, TopCenter, BottomCenter, Center

ProgressBar

Type: Bool
Default: true

Enable timeout progress bar.

ProgressBarColor

Type: String
Default: ''

Progress bar color.

ProgressBarEasing

Type: String
Default: linear

Animation Easing of progress bar.

ResetOnHover

Type: Bool
Default: false

Reset the toast timeout while the cursor is on it.

Target

Type: String
Default: ''

Fixed place where you want to show the toasts.

TargetFirst

Type: Bool
Default: true

Add toast to first position.

Theme

Type: String
Default: light

It can be light or dark or set another class. Create and use like this ".iziToast-theme-name".

Timeout

Type: Int
Default: 5000

Amount in milliseconds to close the toast.

Title

Type: String
Default: ''

Title of the toast.

TitleColor

Type: String
Default: ''

Title color.

TitleLineHeight

Type: String
Default: ''

Title line Height.

TitleSize

Type: String
Default: ''

Title font Size.

ToastOnce

Type: Bool
Default: false

Waits for another toast to be closed on &quot;onClosed&quot; function. You&quot;ll need an ID to use it.

TransitionIn

Type: Enum
Default: FadeInUp
Values: BounceInLeft, BounceInRight, BounceInUp, BounceInDown, FadeIn, FadeInDown, FadeInUp, FadeInLeft, FadeInRight, FlipInX

TransitionInMobile

Type: String
Default: fadeInUp

Default toast opening mobile transition.

TransitionOut

Type: Enum
Default: FadeOut
Values: FadeOut, FadeOutUp, FadeOutDown, FadeOutLeft, FadeOutRight, FlipOutX

TransitionOutMobile

Type: String
Default: fadeOutDown

Events