Toasts

Toasts communicate confirmation of an action or a low-priority message. or function of an icon, or display the alt text of an image.

Toasts

Used to communicate confirmation of an action or a low-priority message.



Toast Info

Lorem ipsum dolor sit amet.

JS
const toastInfo = Toastify({  
  node: document.getElementById('toast-text-info'),  
  className: "info",
  close: true,
  duration: 5000
}).showToast();
HTML
<div class="toast-text-hidden">
  <div id="toast-text-info" class="toast-text">
    <strong>Toast Info</strong>
    <p>Lorem ipsum dolor sit amet.</p> 
  </div>
</div>



Toast Danger

Lorem ipsum dolor sit amet.



JS
const toastSucces = Toastify({  
  node: document.getElementById('toast-text-danger'),  
  className: "success",
  close: true,
  duration: 5000
}).showToast();
HTML
<div class="toast-text-hidden">
  <div id="toast-text-danger" class="toast-text">
    <strong>Toast Danger</strong>
    <p>Lorem ipsum dolor sit amet.</p> 
  </div>
</div>



Toast Success

Lorem ipsum dolor sit amet.



JS
const toastWarning = Toastify({  
  node: document.getElementById('toast-text-success'),  
  className: "warning",
  close: true,
  duration: 5000
}).showToast();
HTML
<div class="toast-text-hidden">
  <div id="toast-text-success" class="toast-text">
    <strong>Toast Success</strong>
    <p>Lorem ipsum dolor sit amet.</p> 
  </div>
</div>



Toast Warning

Lorem ipsum dolor sit amet.



JS
const toastDanger = Toastify({  
  node: document.getElementById('toast-text-warning'),  
  className: "danger",
  close: true,
  duration: 5000
}).showToast();
HTML
<div class="toast-text-hidden">
  <div id="toast-text-warning" class="toast-text">
    <strong>Toast Warning</strong>
    <p>Lorem ipsum dolor sit amet.</p> 
  </div>
</div>



Option Key Type Usage Defaults
text string Message to be displayed in the toast "Hi there!"
node ELEMENT_NODE Provide a node to be mounted inside the toast. node takes higher precedence over text
duration number Duration for which the toast should be displayed. -1 for permanent toast 3000
selector string | ELEMENT_NODE ShadowRoot CSS Selector or Element Node on which the toast should be added
destination URL string URL to which the browser should be navigated on click of the toast
newWindow boolean Decides whether the destination should be opened in a new window or not false
close boolean To show the close icon or not false
gravity "top" or "bottom" To show the toast from top or bottom "top"
position "left" or "right" To show the toast on left or right "right"
backgroundColor CSS background value To be deprecated, use style.background option instead. Sets the background color of the toast
avatar URL string Image/icon to be shown before text
className string Ability to provide custom class name for further customization
stopOnFocus boolean To stop timer when hovered over the toast (Only if duration is set) true
callback Function Invoked when the toast is dismissed
onClick Function Invoked when the toast is clicked
offset Object Ability to add some offset to axis
escapeMarkup boolean Toggle the default behavior of escaping HTML markup true
style object Use the HTML DOM Style properties to add any style directly to toast
ariaLive string Announce the toast to screen readers, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions for options "polite"
oldestFirst boolean Set the order in which toasts are stacked in page true