Toasts

Toast notifications appear in the upper or lower corner of the right-hand viewport margin. Suitable for time-sensitive live notifications.

Toast Positioning (Right Margin)

Viewport Simulation (Right Align)

Message sent successfully.

<div class="toast-container toast-container--top">
    <div class="toast">
        <div class="toast__content">
            <span>A new message has arrived.</span>
        </div>
        <button class="toast__close">×</button>
    </div>
</div>