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 left border and background for success, error, warning, and info states.

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.