mirror of
https://github.com/tabler/tabler.git
synced 2026-10-21 23:34:20 +04:00
45 lines
3.5 KiB
Plaintext
45 lines
3.5 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]
|
|
---
|
|
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" />
|
|
|
|
## SCSS variables
|
|
|
|
Use these SCSS variables to customize toasts. The default values are:
|
|
|
|
<CodeDocs name="toast-variables" file="core/scss/_variables.scss" />
|