Text only
JavaScript
$('button').on('click', function(){
  app.toast('A basic toast using Javascript. It stays for 4 seconds.');
});
Duration set to 7 sec. Default is 4 sec
JavaScript
$('button').on('click', function(){
  app.toast('This toast stays for 7 seconds.', {
    duration: 7000
  });
});
Action button
JavaScript
$('button').on('click', function(){
  app.toast('Including an action button with link.', {
    actionTitle: 'Retry',
    actionUrl: 'something'
  });
});
Danger action button
JavaScript
$('button').on('click', function(){
  app.toast('Including a danger action button', {
    actionTitle: 'Retry',
    actionUrl: 'something',
    actionColor: 'danger'
  });
});
Success action button
JavaScript
$('button').on('click', function(){
  app.toast('Including a success action button', {
    actionTitle: 'Retry',
    actionUrl: 'something',
    actionColor: 'success'
  });
});
Basic data-attribute
Markup
<button class="btn btn-primary" data-provide="toast" data-text="This content is from data attribute." data-action-title="Retry" data-action-color="purple">Basic data-attribute</button>

Documentation

Usage

Trigger the toast via JavaScript:

JavaScript
app.toast(text, options)

Trigger the toast via data-attribute when user click on the element:

Markup
<button data-provide="toast" data-text="Sample text." data-duration="3000">Toast it</button>

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-duration="4000" or data-action-title="Undo".

Name Type Default Description
duration Number 4000 How long the toast should be visible (ms).
actionTitle String null The text for action button.
actionUrl String null The link for action button.
actionColor String 'warning' The color of action button. It could be any string that can attach to .text-* utility class.