# Toasts

Toasts

Toasts are small notification appearing from the bottom. According to the Material Design Guidelines they have no icon and at least a small message. Optional you can place one action button.

In nativeDroid2 you can trigger Toasts in two different ways.

Programmatically

    new $.nd2Toast({ // The 'new' keyword is important, otherwise you would overwrite the current toast instance
       message : "Sample Message", // Required
       action : { // Optional (Defines the action button on the right)
         title : "Pick phone", // Title of the action button
         link : "/any/link.html", // optional (either link or fn or both must be set to define an action)
         fn : function() { // function that will be triggered when action clicked
            console.log("Action Button clicked'");
         },
         color : "red" // optional color of the button (default: 'lime')
       },
       ttl : 8000 // optional, time-to-live in ms (default: 3000)
     });

By Data Attributes

    <a href="#"
       data-role="toast"
       data-toast-message="Simple toast message set by data-message"
       data-toast-action-title="Action"
       data-toast-action-link="toasts.html"
       data-toast-action-color="red"
       data-toast-ttl="6000">Link</a>

Demonstration

Open Toast by data attributes Sample Toast with Text Message only

<