mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
98 lines
4.3 KiB
Plaintext
98 lines
4.3 KiB
Plaintext
---
|
|
title: Toast
|
|
summary: A toast is a small message shown for a few seconds after an action, for feedback that doesn't need a response.
|
|
description: Display a lightweight alert notification with a toast.
|
|
related: [/ui/components/alert, /ui/components/modal]
|
|
source: core/scss/ui/_toasts.scss
|
|
css-vars: toast
|
|
classnames:
|
|
component:
|
|
- class: toast
|
|
desc: Container element
|
|
part:
|
|
- class: toast-container
|
|
desc: Positions the toasts on the page
|
|
- class: toast-header
|
|
desc: Title bar with the close button
|
|
- class: toast-body
|
|
desc: Message area
|
|
color:
|
|
- class: toast-{color}
|
|
desc: Any base color, for example toast-success or toast-azure
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
import CodeDocs from '@components/CodeDocs.astro';
|
|
|
|
## Default markup
|
|
|
|
The default toast has a header with the sender and the time, a body with the message, and a close button.
|
|
|
|
<Example>
|
|
<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>
|
|
</Example>
|
|
|
|
## Translucent
|
|
|
|
Toasts are translucent, so the page shows through them. In browsers that support `backdrop-filter`, the content under a toast is blurred.
|
|
|
|
<Example>
|
|
<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>
|
|
</Example>
|
|
|
|
## Stacking toasts
|
|
|
|
Stack multiple toasts together by putting them within one `.toast-container`.
|
|
|
|
<Example height="25rem" centered>
|
|
<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>
|
|
</Example>
|
|
|
|
## 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:
|
|
|
|
<CodeDocs name="toast-init" file="core/js/src/toast.ts" />
|
|
|
|
## Accessibility
|
|
|
|
- Put `role="status"` and `aria-live="polite"` on a toast that reports success, and `role="alert"` with `aria-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 - set `data-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"`.
|