Toast
A toast is a small message shown for a few seconds after an action, for feedback that doesn't need a response.
Default markup
The default toast has a header with the sender and the time, a body with the message, and a close button.
Mallory Hulme11 mins ago
Hello, world! This is a toast message.
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
<div class="toast-header">
<span class="avatar avatar-xs me-2" style="background-image: url(/static/avatars/018f.jpg)"></span>
<strong class="me-auto">Mallory Hulme</strong>
<small>11 mins ago</small>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>Translucent
Toasts are translucent, so the page shows through them. In browsers that support backdrop-filter, the content under a toast is blurred.
Mallory Hulme11 mins ago
Hello, world! This is a toast message.
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
<div class="toast-header">
<span class="avatar avatar-xs me-2" style="background-image: url(/static/avatars/029m.jpg)"></span>
<strong class="me-auto">Mallory Hulme</strong>
<small>11 mins ago</small>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>Stacking toasts
Stack multiple toasts together by putting them within one .toast-container.
Dunn Slane11 mins ago
Hello, world! This is a toast message.
Mallory Hulme7 mins ago
This is another toast message.
<div class="toast-container">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
<div class="toast-header">
<span class="avatar avatar-xs me-2" style="background-image: url(/static/avatars/008m.jpg)"></span>
<strong class="me-auto">Dunn Slane</strong>
<small>11 mins ago</small>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
<div class="toast-header">
<span class="avatar avatar-xs me-2" style="background-image: url(/static/avatars/020m.jpg)"></span>
<strong class="me-auto">Mallory Hulme</strong>
<small>7 mins ago</small>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">This is another toast message.</div>
</div>
</div>JavaScript
Tabler binds every element with data-bs-toggle="toast" to show the toast from its data-bs-target on click. This is the code that runs:
const toastsTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="toast"]'))
toastsTriggerList.map(function (toastTriggerEl: HTMLElement) {
const target = toastTriggerEl.getAttribute('data-bs-target')
if (target === null) {
return
}
const toastEl = new Toast(target)
toastTriggerEl.addEventListener('click', () => {
toastEl.show()
})
})Accessibility
- Put
role="status"andaria-live="polite"on a toast that reports success, androle="alert"witharia-live="assertive"on one that reports an error. Assertive interrupts the reader, so keep it for things that matter. - The live region has to be in the DOM before the message arrives. Render an empty toast container on page load and fill it, rather than inserting the whole toast at the moment of the event.
- Toasts hide themselves after
data-bs-delay. That is too fast to read for many people - setdata-bs-autohide="false"for anything the user has to act on. - A toast does not take focus. Never put the only copy of an action inside one.
- Label the close button with
aria-label="Close".
SCSS variables
Use these SCSS variables to customize toasts. The default values are:
$toast-max-width: 350px;
$toast-padding-x: 0.75rem;
$toast-padding-y: 0.5rem;
$toast-font-size: 0.875rem;
$toast-color: null;
$toast-background-color: var(--bg-surface);
$toast-border-width: var(--border-width);
$toast-border-color: var(--border-color);
$toast-border-radius: var(--border-radius);
$toast-box-shadow: var(--box-shadow);
$toast-spacing: $container-padding-x;
$toast-header-color: var(--gray-500);
$toast-header-background-color: color-transparent(var(--body-bg), 0.85);
$toast-header-border-color: $toast-border-color;Class reference
Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.
toast | component | Container element |
toast-container | part | Positions the toasts on the page |
toast-header | part | Title bar with the close button |
toast-body | part | Message area |
toast-{color} | color | Any base color, for example toast-success or toast-azure |
