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

Default

toast notification without icon

Info

toast notification with icon

Success

toast notification with icon

Warning

toast notification with icon

Danger

toast notification with icon

Toasts Position in Action