Skip to content
STYLESCAPE

Toasts

Short notifications that float in a corner of the viewport. An ss-c-toast-region with a data-position (top-right, top-left, bottom-right, bottom-left) holds the toasts; inside ss-l-app the top regions start below the app header. Django messages use the same toasts through ss-c-messages--toast (see Messages).

Variants

Shown in place here; in a page they sit in a region. The modifiers follow Django's level_tag: --debug (the default look), --info, --success, --warning and --error (--danger is an alias).

Settings saved.
3 new comments.
Profile updated.
Connection is slow.
Upload failed.
HTML 
<div class="ss-f-stack ss-f-stack-xs">
            <div class="ss-c-toast">Settings saved.</div>
            <div class="ss-c-toast ss-c-toast--info">3 new comments.</div>
            <div class="ss-c-toast ss-c-toast--success">Profile updated.</div>
            <div class="ss-c-toast ss-c-toast--warning">Connection is slow.</div>
            <div class="ss-c-toast ss-c-toast--error">Upload failed.</div>
        </div>

Title and close button

__content takes the free width and holds an optional __title; __close on an ss-c-close button takes the toast's colour and sits at the end.

New message You have a new message from the team.
Export ready report-2026-10.csv has been generated.
HTML 
<div class="ss-f-stack ss-f-stack-xs">
            <div class="ss-c-toast">
                <div class="ss-c-toast__content">
                    <strong class="ss-c-toast__title">New message</strong>
                    You have a new message from the team.
                </div>
                <button type="button" class="ss-c-close ss-c-toast__close" aria-label="Dismiss notification"></button>
            </div>
            <div class="ss-c-toast ss-c-toast--success">
                <div class="ss-c-toast__content">
                    <strong class="ss-c-toast__title">Export ready</strong>
                    report-2026-10.csv has been generated.
                </div>
                <button type="button" class="ss-c-close ss-c-toast__close" aria-label="Dismiss notification"></button>
            </div>
        </div>

Actions

Item deleted.
Update available Version 2.4 is ready to install.
HTML 
<div class="ss-f-stack ss-f-stack-xs">
            <div class="ss-c-toast">
                <div class="ss-c-toast__content">
                    Item deleted.
                    <div class="ss-c-toast__actions">
                        <button type="button" class="ss-c-button ss-c-button--sm">Undo</button>
                    </div>
                </div>
                <button type="button" class="ss-c-close ss-c-toast__close" aria-label="Dismiss notification"></button>
            </div>
            <div class="ss-c-toast ss-c-toast--info">
                <div class="ss-c-toast__content">
                    <strong class="ss-c-toast__title">Update available</strong>
                    Version 2.4 is ready to install.
                    <div class="ss-c-toast__actions">
                        <button type="button" class="ss-c-button ss-c-button--sm">Update</button>
                        <button type="button" class="ss-c-button ss-c-button--sm ss-c-button--outline">Later</button>
                    </div>
                </div>
            </div>
        </div>

Live region

The region is a polite live region, so screen readers announce new toasts. Each one here dismisses itself after five seconds or on its close button.

HTML 
<button type="button" class="ss-c-button" id="toast-demo-trigger">Show a toast</button>

        <div class="ss-c-toast-region" data-position="top-right" id="toast-demo-region" role="status" aria-live="polite"></div>

NotificationManager parts

NotificationManager builds this markup: a region with data-position (also top-center and bottom-center), and toasts with an __icon, a __content holding __title, __message and __actions (with __action buttons), a __close and an optional __progress bar. data-state="entering" and "leaving" fade a toast in and out.

HTML 
<div class="ss-c-toast ss-c-toast--info" role="alert">
            <span class="ss-c-toast__icon" aria-hidden="true">i</span>
            <div class="ss-c-toast__content">
                <div class="ss-c-toast__title">Update available</div>
                <div class="ss-c-toast__message">Version 0.5.2 is ready.</div>
                <div class="ss-c-toast__actions">
                    <button type="button" class="ss-c-toast__action">Update now</button>
                </div>
            </div>
            <button type="button" class="ss-c-close ss-c-toast__close" aria-label="Close"></button>
            <div class="ss-c-toast__progress"><div class="ss-c-toast__progress-bar" style="width: 60%"></div></div>
        </div>