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

NameTypeDefaultDescription
durationNumber4000How long the toast should be visible (ms).
actionTitleStringnullThe text for action button.
actionUrlStringnullThe link for action button.
actionColorString'warning'The color of action button. It could be any string that can attach to .text-*utility class.