Toast (iziToast)

Properties

Title: string

Title of the toast.

TitleColor: string

Title color.

TitleSize: string

Title font Size.

TitleLineHeight: string

Title line Height.

Message: string

Message of notification.

MessageColor: string

Message color.

MessageSize: string

Message font Size.

MessageLineHeight: string

Message line Height.

BackgroundColor: string

Background color of the Toast.

Theme: string

Default: light

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

Color: string

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

Icon: string

Icon class (font-icon of your choice, Icomoon, Fontawesome etc.).

IconText: string

Icon text (font-icon using text, Material Icons, etc.).

IconColor: string

Icon color.

Image: string

Cover image.

ImageWidth: integer

Default: 50

Width of cover image.

MaxWidth: integer

Set max Width of toast.

Layout: integer

Default: 1

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

Balloon: boolean

Default: false

Applies a balloon like toast.

Close: boolean

Default: true

Show “x” close button.

CloseOnEscape: boolean

Default: false

Allows to close toast using the Esc key.

CloseOnClick: boolean

Default: false

Allows to close toast clicking on it.

Position: string

Default: bottomRight

Where it will be shown. It can be bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter or center.

Target: string

Fixed place where you want to show the toasts.

TargetFirst: boolean

Default: true

Add toast to first position.

ToastOnce: boolean

Default: false

Waits for another toast to be closed on ‘onClosed’ function. You’ll need an ID to use it.

Timeout: integer

Default: 5000

Amount in milliseconds to close the toast.

PauseOnHover: boolean

Default: true

Pause the toast timeout while the cursor is on it.

ResetOnHover: boolean

Default: false

Reset the toast timeout while the cursor is on it.

ProgressBar: boolean

Default: true

Enable timeout progress bar.

ProgressBarColor: string

Progress bar color.

ProgressBarEasing: string

Default: linear

Animation Easing of progress bar.

Overlay: boolean

Default: false

Enables display the Overlay layer on the page.

OverlayClose: boolean

Default: false

Allows to close toast clicking on the Overlay.

OverlayColor: string

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

Overlay background color.

TransitionIn: string

Default: fadeInUp

Default toast open animation. It can be: bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight or flipInX.

TransitionOut: string

Default: fadeOut

Default toast close animation. It can be: fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX.

TransitionInMobile: string

Default: fadeInUp

Default toast opening mobile transition.

TransitionOutMobile: string

Default: fadeOutDown

Default toast closing mobile transition.

Try It