Design System Preview

TOAST: Lightweight confirmation messages that appear after user actions
POSITIONING: Bottom-center, slides up from bottom edge
CLASSES: .tw-toast .tw-toast-container .tw-toast-visible .tw-toast-dismissing .tw-toast-success .tw-toast-error .tw-toast-warning .tw-toast-info .tw-toast-icon .tw-toast-message .tw-toast-action .tw-toast-close

Toasts provide quick, non-blocking confirmations (e.g., "Copied!", "Saved!", "Undo available"). Auto-dismiss after 3 seconds (6s with action), pause-on-hover supported. Dark background with semantic color via icon only.

Basic Toast

Minimal Structure: Icon + message in dark container. White text ensures readability.

Changes saved successfully

<div class="tw-toast tw-toast-visible">

        <i class="fa-solid fa-check tw-toast-icon"></i>

        <span class="tw-toast-message">Changes saved successfully</span>

      </div>

Semantic Variants

Icon Color Only: Dark background remains consistent. Add .tw-toast-success, .tw-toast-error, .tw-toast-warning, or .tw-toast-info to color the icon.

Application submitted successfully

Failed to save changes

Connection unstable — changes may not save

New version available

<div class="tw-toast tw-toast-success tw-toast-visible">...</div>

      <div class="tw-toast tw-toast-error tw-toast-visible">...</div>

      <div class="tw-toast tw-toast-warning tw-toast-visible">...</div>

      <div class="tw-toast tw-toast-info tw-toast-visible">...</div>

With Close Button

Manual Dismiss: Add .tw-toast-close button for user-controlled dismissal. Still auto-dismisses unless disabled.

Email copied to clipboard

<div class="tw-toast tw-toast-visible">

        <i class="fa-solid fa-check tw-toast-icon"></i>

        <span class="tw-toast-message">Email copied to clipboard</span>

        <button type="button" class="tw-toast-close" aria-label="Dismiss">

          <i class="fa-solid fa-xmark"></i>

        </button>

      </div>

With Action Button

Actionable: Add .toast-action link/button for quick actions (e.g., "Undo", "View"). Auto-dismiss extends to 6 seconds when action is present.

3 items deleted

<div class="tw-toast tw-toast-visible">

        <i class="fa-solid fa-trash tw-toast-icon"></i>

        <span class="tw-toast-message">3 items deleted</span>

        <button type="button" class="tw-toast-action">Undo</button>

      </div>

Without Close Button

Auto-dismiss Only: Omit close button for brief confirmations that should disappear automatically.

Link copied!

<div class="tw-toast tw-toast-success tw-toast-visible">

        <i class="fa-solid fa-circle-check tw-toast-icon"></i>

        <span class="tw-toast-message">Link copied!</span>

      </div>

Stacked Toasts

Multiple Toasts: Container uses flex-col-reverse so newer toasts appear above older ones. Each auto-dismisses independently.

Profile updated

Password changed successfully

Security settings updated

<div class="tw-toast-container">

        <!-- Newer toasts appear above older ones -->

        <div class="tw-toast tw-toast-visible">...</div>

        <div class="tw-toast tw-toast-visible">...</div>

        <div class="tw-toast tw-toast-visible">...</div>

      </div>

Interactive Demo

Live Controller: Click buttons below to spawn toasts with Stimulus controller. Features auto-dismiss (3s default, 6s with action), pause-on-hover, manual dismiss via close button, and Escape key support.

Interactions: Hover to pause auto-dismiss • Click X to close • Press Escape to dismiss topmost

Duration: 3s default • 6s with action button • Disabled when data-auto-dismiss="0"

<div data-controller="toast">

        <div class="tw-toast-container">

          <div class="tw-toast" data-toast-target="toast" role="status" aria-live="polite">

            <i class="fa-solid fa-check tw-toast-icon"></i>

            <span class="tw-toast-message">Changes saved</span>

            <button type="button" class="tw-toast-close" data-action="click->toast#dismiss">

              <i class="fa-solid fa-xmark"></i>

            </button>

          </div>

        </div>

      </div>

Accessibility

ARIA Attributes:

role="status" on toast element
aria-live="polite" announces to screen readers without interrupting
aria-label="Dismiss" on close button for icon-only context

Keyboard Support:

Escape — Dismisses the most recent toast
Close button is keyboard focusable via Tab
Action button (if present) is keyboard focusable

Motion: Animation respects prefers-reduced-motion — transitions disabled when user prefers reduced motion.