Toast

Notification messages that appear temporarily. Requires the nanoui-toast Stimulus controller.

Variants

Notification

Something happened.

Success!

Changes saved successfully.

Error

Something went wrong.

Warning

Your session is about to expire.

<!-- Add once to your layout -->
<div class="nano-toast-container"
     data-controller="nanoui-toast"
     data-nanoui-toast-duration-value="5000"
     aria-live="polite">

  <output class="nano-toast nano-toast--success"
          role="status"
          data-nanoui-toast-target="item">
    <div class="nano-toast__content">
      <p class="nano-toast__title">Success!</p>
      <p class="nano-toast__description">Changes saved.</p>
    </div>
    <button class="nano-toast__close"
            data-action="nanoui-toast#dismiss"
            aria-label="Dismiss">&times;</button>
  </output>

</div>

Interactive demo

<!-- Variants: nano-toast--success, nano-toast--destructive, nano-toast--warning -->
<output class="nano-toast nano-toast--success" ...>
  <div class="nano-toast__content">
    <p class="nano-toast__title">Saved</p>
    <p class="nano-toast__description">Your changes have been saved.</p>
  </div>
  <button class="nano-toast__close" data-action="nanoui-toast#dismiss">&times;</button>
</output>

Action button

Add .nano-toast__action alongside (or instead of) the close button when the toast needs a secondary CTA — “Undo”, “View”, “Retry”, etc. The action’s border and text inherit the toast variant colors automatically.

Invoice recovered

$49.00 was charged successfully.

View invoice

Retry failed

Card declined — insufficient funds.

<output class="nano-toast nano-toast--success" role="status">
  <div class="nano-toast__content">
    <p class="nano-toast__title">Invoice recovered</p>
    <p class="nano-toast__description">$49.00 was charged successfully.</p>
  </div>
  <a href="/invoices/123" class="nano-toast__action">View invoice</a>
  <button class="nano-toast__close" aria-label="Dismiss">&times;</button>
</output>

Stimulus controller

Targets: item (individual toast elements)
Values: duration (Number, default 5000ms, 0 = no auto-dismiss)
Actions: dismiss(event) – manually dismiss a toast
Toasts auto-dismiss after duration and are removed from DOM