tabler/docs/ui/components/toasts.md

title, summary, bootstrapLink, description, layout

title	summary	bootstrapLink	description	layout
Toasts	Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.	components/toasts/	Display lightweight alert notifications.	default

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.

<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(/samples/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 blend over the elements they appear over. If a browser supports the backdrop-filter CSS property, the elements under a toast will be blurred.

<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(/samples/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.

<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(/samples/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(/samples/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>