Alerts

tier 2 — classes

An inline banner that explains a state, in place, on the page. Four variants, same semantic families as the buttons and badges.

An alert is a condition, not an event Use one for something that stays true while the page is open — degraded connection, read-only mode, an empty filter result. Transient feedback about an action the user just took belongs in a toast.

Every tone

With no tone an alert is a plain note. A tone tints it, .alert--solid fills it, and a link inside takes the alert's own ink with an underline. Callouts take the same tones.

A plain note, with no tone.

The new pick list is live for the north site.

All 42 orders were exported.

Two lines are waiting for stock.

The export failed: the file is locked.

Exports run every night at 02:00.

This key is shown once.

Payments are stopped until the account is verified. Verify it

BrandThe new pick list is live for the north site.

GoAll 42 orders were exported.

WarnTwo lines are waiting for stock.

DangerThe export failed: the file is locked.

InfoExports run every night at 02:00.

SecretThis key is shown once.

<div class="sedna-col sedna-gap-1">
    <div class="alert"><i class="ri-sticky-note-line"></i><span>A plain note, with no tone.</span></div>
    <div class="alert alert--brand"><i class="ri-megaphone-line"></i><span>The new pick list is live for the north site.</span></div>
    <div class="alert alert--go"><i class="ri-check-line"></i><span>All 42 orders were exported.</span></div>
    <div class="alert alert--warn"><i class="ri-alert-line"></i><span>Two lines are waiting for stock.</span></div>
    <div class="alert alert--danger"><i class="ri-error-warning-line"></i><span>The export failed: the file is locked.</span></div>
    <div class="alert alert--info"><i class="ri-information-line"></i><span>Exports run every night at 02:00.</span></div>
    <div class="alert alert--secret"><i class="ri-lock-line"></i><span>This key is shown once.</span></div>
    <div class="alert alert--danger alert--solid"><i class="ri-error-warning-line"></i><span>Payments are stopped until the account is verified. <a href="#">Verify it</a></span></div>
    <div class="callout callout--brand"><i class="ri-megaphone-line"></i><div class="callout-body"><span class="callout-title">Brand</span>The new pick list is live for the north site.</div></div>
    <div class="callout callout--go"><i class="ri-check-line"></i><div class="callout-body"><span class="callout-title">Go</span>All 42 orders were exported.</div></div>
    <div class="callout callout--warn"><i class="ri-alert-line"></i><div class="callout-body"><span class="callout-title">Warn</span>Two lines are waiting for stock.</div></div>
    <div class="callout callout--danger"><i class="ri-error-warning-line"></i><div class="callout-body"><span class="callout-title">Danger</span>The export failed: the file is locked.</div></div>
    <div class="callout callout--info"><i class="ri-information-line"></i><div class="callout-body"><span class="callout-title">Info</span>Exports run every night at 02:00.</div></div>
    <div class="callout callout--secret"><i class="ri-lock-line"></i><div class="callout-body"><span class="callout-title">Secret</span>This key is shown once.</div></div>
</div>

Variants

Always pair the colour with an icon — colour alone is not an accessible signal.

You are in demo mode. Nothing you do here reaches a real system.

All 128 orders are up to date. Last sync 30 seconds ago.

The workflow API is unreachable. The queue is showing the last known state.

Writes are failing. Your last decision was not saved — retry it.

<div class="alert alert--info">
    <i class="ri-information-line"></i>
    <span>You are in <strong>demo mode</strong>. Nothing you do here reaches a real system.</span>
</div>
<div class="alert alert--go">
    <i class="ri-check-line"></i>
    <span>All 128 orders are up to date. Last sync 30 seconds ago.</span>
</div>
<div class="alert alert--warn">
    <i class="ri-alert-line"></i>
    <span>The workflow API is unreachable. The queue is showing the last known state.</span>
</div>
<div class="alert alert--danger">
    <i class="ri-error-warning-line"></i>
    <span>Writes are failing. Your last decision was <strong>not</strong> saved — retry it.</span>
</div>

With an action

.alert is a flex row, so margin-left:auto on a trailing button pushes it to the end.

Your session expires in 2 minutes.

<div class="alert alert--warn">
    <i class="ri-alert-line"></i>
    <span>Your session expires in 2 minutes.</span>
    <button class="btn btn--sm" style="margin-left:auto">Stay signed in</button>
</div>

Read-only mode

The pattern for telling a viewer-role user why every control is disabled.

Read-only access. You can see everything here, but not decide anything.

ORD-4209 Pending

Reservation: reroute to EU-West (confidence 0.87).

<div>
    <div class="alert alert--info">
        <i class="ri-eye-line"></i>
        <span>Read-only access. You can see everything here, but not decide anything.</span>
    </div>
    <div class="card">
        <div class="card-head">
            <strong>ORD-4209</strong>
            <span class="badge badge--warn">Pending</span>
        </div>
        <div class="card-body">
            <p class="form-hint">Reservation: reroute to EU-West (confidence 0.87).</p>
        </div>
        <div class="modal-footer">
            <button class="btn" disabled>Reject</button>
            <button class="btn btn--go btn--solid" disabled><i class="ri-check-line"></i> <span>Approve &amp; send</span></button>
        </div>
    </div>
</div>

A validation summary

One alert at the top of the form saying nothing was saved, with a link to each field that needs attention. It does not replace the per-field messages: each control keeps aria-invalid and an aria-describedby pointing at its own .form-error, because that is what is read when focus arrives.

<form style="max-width:520px">
    <div class="alert alert--danger">
        <i class="ri-error-warning-line"></i>
        <span>
            <strong>Nothing was saved.</strong> Two fields need attention:
            <a href="#vs-email">a work e-mail address</a> and
            <a href="#vs-region">a region</a>.
        </span>
    </div>
    <div class="form-field">
        <label class="form-label form-label--required" for="vs-email">Work e-mail</label>
        <input class="form-input" id="vs-email" type="email" value="alex.fischer"
               aria-invalid="true" aria-describedby="vs-email-error" />
        <p class="form-error" id="vs-email-error">
            <i class="ri-error-warning-line"></i> <span>This is not a complete address.</span>
        </p>
    </div>
    <div class="form-field">
        <label class="form-label form-label--required" for="vs-region">Region</label>
        <select class="form-input form-select" id="vs-region" aria-invalid="true"
                aria-describedby="vs-region-error">
            <option value="" selected>Choose a region…</option>
            <option>EU-West</option>
            <option>EU-Central</option>
        </select>
        <p class="form-error" id="vs-region-error">
            <i class="ri-error-warning-line"></i> <span>Orders cannot be routed without one.</span>
        </p>
    </div>
    <div class="form-actions">
        <button class="btn" type="button">Cancel</button>
        <button class="btn btn--brand btn--solid" type="button">Save</button>
    </div>
</form>