mirror of
https://github.com/tabler/tabler.git
synced 2026-10-13 21:57:00 +04:00
103 lines
4.7 KiB
Plaintext
103 lines
4.7 KiB
Plaintext
---
|
|
title: Toast
|
|
summary: A toast is a lightweight alert box that displays for a few seconds after a user action to communicate state or outcome. It is useful after actions like clicking a button or submitting a form, where feedback is needed without prompting another action.
|
|
description: Display a lightweight alert notification with a toast.
|
|
related: [/ui/components/alert, /ui/components/modal]
|
|
source: core/scss/ui/_toasts.scss
|
|
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
|
|
|
|
Use the default toast message to inform users of the outcome of their action and provide additional information. It contains an `x` close button to make it possible for users to close the toast if they wish.
|
|
|
|
<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 blend over the elements they appear over. If a browser supports the `backdrop-filter` CSS property, the elements under a toast will be 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"`.
|
|
|
|
## SCSS variables
|
|
|
|
Use these SCSS variables to customize toasts. The default values are:
|
|
|
|
<CodeDocs name="toast-variables" file="core/scss/_variables.scss" />
|