Toast Notifications

You can alter toast notification look and behaviour via flexible data API data-toast-*:

• 'type' = 'none' (default) / 'info' / 'success' / 'warning' / 'danger' To alter look of the toast.
• 'icon' = 'icon-heart' Use class of built-in Feather icons or any othe icon pack you use.
• 'position' = 'topRight' / 'topCenter' / 'bottomRight' / 'bottomCenter' / 'bottomLeft' / 'topLeft' Where the toast notification appears on the page.
• 'title' = '' (string) Toast notification title.
• 'message' = '' (string) Toast notification message.

Color Variations

---

Toasts Position in Action

---

Info Top Right Success Top Left Warning Bottom Right Danger Bottom Left Default Top Center Default Bottom Center

Default Bootstrap Toast

---