Toast

Basic usage

Wrap an .alert inside a .toast container with a position class:

<div class="toast toast-top-right">
    <div class="alert alert-success" role="alert">
        <p>Changes saved.</p>
    </div>
</div>

Positions

6 position classes are available:

<div class="toast toast-top-right">...</div>
<div class="toast toast-top-left">...</div>
<div class="toast toast-top-center">...</div>
<div class="toast toast-bottom-right">...</div>
<div class="toast toast-bottom-left">...</div>
<div class="toast toast-bottom-center">...</div>

Color variants

Toasts reuse the alert color variants. All 11 color roles are available:

<div class="toast toast-top-right">
    <div class="alert alert-primary" role="alert"><p>Primary toast.</p></div>
</div>

<div class="toast toast-top-right">
    <div class="alert alert-error" role="alert"><p>Error toast.</p></div>
</div>

Available variants: alert-primary, alert-secondary, alert-tertiary, alert-contrast, alert-accent, alert-success, alert-info, alert-warning, alert-error, alert-pop, alert-spark.

With title

Use .alert-title for a bold heading inside the toast:

<div class="toast toast-top-right">
    <div class="alert alert-success" role="alert">
        <span class="alert-title">Saved!</span>
        <p>Your changes have been saved.</p>
    </div>
</div>

Dismissible

Add .alert-dismissible and an .alert-close button:

<div class="toast toast-top-right">
    <div class="alert alert-info alert-dismissible" role="alert">
        <p>This toast can be dismissed.</p>
        <button class="alert-close" aria-label="Close" onclick="this.closest('.toast').remove()">&times;</button>
    </div>
</div>

CSS classes reference

Responsive behavior

On viewports narrower than 640px, all toast positions switch to full-width (left: 1rem; right: 1rem; max-width: none) to avoid content overflow on mobile devices.

Styling details

Accessibility

• Use role="alert" on the inner alert element so screen readers announce the notification.
• Dismissible toasts should include aria-label="Close" on the close button.
• Auto-dismiss timing (e.g. 4 seconds) is the application's JS responsibility — µCSS provides only the CSS positioning.