Toasts

Dismissible notification messages for user feedback.

Default toast

A neutral notification with a close button.

Code

<div class="toast">
  <p class="content">Something happened.</p>
  <button class="close" aria-label="Dismiss">&times;</button>
</div>

Something happened.

Semantic variants

Colored backgrounds for success, error, warning, and info states. Every toast uses even --line-05 padding, with text centered beside the dismiss button.

Code

<div class="toast toast--success">...</div>
<div class="toast toast--error">...</div>
<div class="toast toast--warning">...</div>
<div class="toast toast--info">...</div>

Changes saved successfully.

Something went wrong.

Please review before continuing.

New version available.

Positioning toasts

Use the .imposter-fixed layout primitive to position a toast container in the viewport.

Compose layout primitives rather than using a toast-specific container class.

Optional region behavior

Choose an explicit application outcome. Request completion alone does not mean saved. Timed feedback pauses under hover or focus; errors, pending feedback and actions stay until dismissed.

Unrelated replacements: 0. Two independent regions are active.

Editor feedback

This is native feedback. Add messages to try the optional behavior.

Independent region

The same message ID has its own state here.

Run deterministic browser lifecycle checks. Read the toast-region contract.