---
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"`.