Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Toasts on Hummingbird
Basic Example
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Hummingbird</strong><small>11 mins ago</small>
    <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Hello, world! This is a toast message.</div>
</div>
Stacking

When you have multiple toasts, we default to vertically stacking them in a readable manner.

<div class="toast show mb-2" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Hummingbird</strong>
    <small class="text-muted">just now
    </small><button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">See? Just like this.</div>
</div>
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Hummingbird</strong><small class="text-muted">2 seconds ago</small>
    <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Heads up, toasts will stack automatically</div>
</div>
Placement

Place toasts with the helper classes as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the .toast.

Example
Hummingbird11 mins ago
Hello, world! This is a toast message.
<div class="relative min-h-22.5" aria-live="polite" aria-atomic="true">
  <div class="toast show absolute top-0 end-0">
    <div class="toast-header">
      <strong class="me-auto">Hummingbird</strong><small>11 mins ago</small>
      <button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
  </div>
</div>

You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.

<div class="flex flex-center min-h-75" aria-live="polite" aria-atomic="true">
  <div class="toast show" role="alert" data-bs-autohide="false" aria-live="assertive" aria-atomic="true">
    <div class="toast-header"><strong class="me-auto">Hummingbird</strong><small>11 mins ago</small><button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button></div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
  </div>
</div>
Live Toast
<button class="btn btn-primary" id="liveToastBtn" type="button">Show live toast</button>
<div class="fixed bottom-0 end-0 p-4 z-50">
  <div class="toast fade" id="liveToast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-primary text-white"><strong class="me-auto">Hummingbird</strong><small>11 mins ago</small>
      <div data-hb-theme="dark"><button class="btn-close" type="button" data-bs-dismiss="toast" aria-label="Close"></button></div>
    </div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
  </div>
</div>
Color schemes
<div class="flex">
  <div class="toast show items-center text-white bg-primary border-0" role="alert" data-bs-autohide="false" aria-live="assertive" aria-atomic="true">
    <div class="flex flex-between-center">
      <div class="toast-body text-white bg-primary">
        Hello, world! This is a toast message.
      </div>
      <div data-hb-theme="dark"><button class="btn-close me-2 m-auto" type="button" data-bs-dismiss="toast" aria-label="Close"></button></div>
    </div>
  </div>
</div>
Custom Content

You can also add additional controls and components to toasts.

<div class="toast show items-center" role="alert" data-bs-autohide="false" aria-live="assertive" aria-atomic="true">
  <div class="flex">
    <div class="toast-body">Hello, world! This is a toast message.</div>
    <button class="btn-close me-2 m-auto" type="button" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="mt-2 p-4 border-t">
    <button class="btn btn-primary btn-sm" type="button">Take action</button>
    <button class="btn btn-secondary btn-sm ms-2" type="button" data-bs-dismiss="toast">Close</button>
  </div>
</div>

Thank you for creating with Falcon tailwind
2026 © ThemeWagon

v1.0.0-alpha

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.

RTL Mode

Switch your language direction

RTL Documentation
Fluid Layout

Toggle container layout system

Fluid Documentation
Navigation Position

Select a suitable navigation system for your web application

Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon tailwind now and create beautiful dashboards with hundreds of widgets.

Purchase
customize