UI Component library
Skip to main content
Toast
MDL-66828
MDL-67074
MDL-72544
3.8
How it works
Toasts are lightweight notifications designed to mimic push notifications. Moodle toasts are based upon core the Bootstrap notification feature, but with a Moodle Javascript module wrapper.
Source files
lib/amd/src/toast.js
(core/toast)lib/templates/local/toast/message.mustache
Examples
Toasts can only be applied from JavaScript, and the most basic form just takes the message to be displayed.
Displaying a simple message
{{#js}}
require(['core/toast'], Toast => {
const button = document.querySelector("[data-example-name='basic']")
button.addEventListener('click', () => {
Toast.add('This is the message for the toast');
});
});
{{/js}}
<button type="button" class="btn btn-info" data-example-name="basic">Basic example</button>
{{#js}}
require(['core/toast'], Toast => {
const button = document.querySelector("[data-example-name='basic']")
button.addEventListener('click', () => {
Toast.add('This is the message for the toast');
});
});
{{/js}}
Applying semantic styles
The standard semantic Bootstrap styles can be applied.
{{#js}}
require(['core/toast'], Toast => {
const container = document.querySelector("[data-example-name='semantic']").parentNode;
container.addEventListener('click', e => {
if (!e.target.closest('[data-type]')) {
return;
}
Toast.add(`This toast will be displayed with the ${e.target.dataset.type} type.`, {
type: e.target.dataset.type,
});
});
});
{{/js}}
<button type="button" class="btn btn-success" data-example-name="semantic" data-type="success">Success</button>
<button type="button" class="btn btn-danger" data-example-name="semantic" data-type="danger">Danger</button>
<button type="button" class="btn btn-warning" data-example-name="semantic" data-type="warning">Warning</button>
<button type="button" class="btn btn-info" data-example-name="semantic" data-type="info">Info</button>
{{#js}}
require(['core/toast'], Toast => {
const container = document.querySelector("[data-example-name='semantic']").parentNode;
container.addEventListener('click', e => {
if (!e.target.closest('[data-type]')) {
return;
}
Toast.add(`This toast will be displayed with the ${e.target.dataset.type} type.`, {
type: e.target.dataset.type,
});
});
});
{{/js}}
Auto-hide, and close buttons
The standard behaviour of the toast is to auto-hide after a short period which can be configured or disabled. A close button can also be displayed, which is recommended when a longer period is used.
Name | Description |
---|---|
delay |
An auto-hide delay can be configured by providing a millisecond setting |
autohide |
The auto-hide can be entirely disabled using this boolean setting |
closeButton |
The presence of the close button can be controlled using this boolean setting |
{{#js}}
require(['core/toast'], Toast => {
document.querySelector("[data-example-name='autohide-long']").addEventListener('click', e => {
Toast.add('This message will be displayed for 30 seconds with a closeButton', {
delay: 30000,
closeButton: true,
});
});
document.querySelector("[data-example-name='autohide-disabled']").addEventListener('click', e => {
Toast.add('This message will be displayed until closed using the closeButton.', {
autohide: false,
closeButton: true,
});
});
});
{{/js}}
<button type="button" class="btn btn-primary" data-example-name="autohide-long">Auto-hide long</button>
<button type="button" class="btn btn-primary" data-example-name="autohide-disabled">Auto-hide disabled</button>
{{#js}}
require(['core/toast'], Toast => {
document.querySelector("[data-example-name='autohide-long']").addEventListener('click', e => {
Toast.add('This message will be displayed for 30 seconds with a closeButton', {
delay: 30000,
closeButton: true,
});
});
document.querySelector("[data-example-name='autohide-disabled']").addEventListener('click', e => {
Toast.add('This message will be displayed until closed using the closeButton.', {
autohide: false,
closeButton: true,
});
});
});
{{/js}}
Using a Language String
The standard behaviour of the toast is to auto-hide after a short period which can be configured or disabled. A close button can also be displayed, which is recommended when a longer period is used.
{{#js}}
require(['core/toast', 'core/str'], (Toast, Str) => {
document.querySelector("[data-example-name='langstring']").addEventListener('click', e => {
Toast.add(Str.get_string('ok'));
});
});
{{/js}}
<button type="button" class="btn btn-primary" data-example-name="langstring">Language string</button>
{{#js}}
require(['core/toast', 'core/str'], (Toast, Str) => {
document.querySelector("[data-example-name='langstring']").addEventListener('click', e => {
Toast.add(Str.get_string('ok'));
});
});
{{/js}}