Text only
$('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
$('button').on('click', function(){
  app.toast('This toast stays for 7 seconds.', {
    duration: 7000
  });
});
Action button
$('button').on('click', function(){
  app.toast('Including an action button with link.', {
    actionTitle: 'Retry',
    actionUrl: 'something'
  });
});
Danger action button
$('button').on('click', function(){
  app.toast('Including a danger action button', {
    actionTitle: 'Retry',
    actionUrl: 'something',
    actionColor: 'danger'
  });
});
Success action button
$('button').on('click', function(){
  app.toast('Including a success action button', {
    actionTitle: 'Retry',
    actionUrl: 'something',
    actionColor: 'success'
  });
});
Basic data-attribute
<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:

app.toast(text, options)

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

<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.