32Alert
A block message tied to a region of the page. Hairline all round, the leading edge thickened in the status colour — the same accent-line device cards use, so a warning introduces no new visual language.
Use it for
- Anything the user must act on — it stays on screen and sits next to what failed
- Context worth keeping visible (trial expiry, saved state)
Not for
- Transient confirmations — Toast
- A one-word state — Status
Tones
Draft saved
Your progress is stored locally.
Trial org expires in 3 days
Finish the data-loader lesson before it locks.
Deployment failed
Two test classes are below 75% coverage.
markup
<div class="ns-alert ns-alert--info" role="status">
<i class="ph ph-info ns-alert__icon" aria-hidden="true"></i>
<div class="ns-alert__body"><strong class="ns-alert__title">Draft saved</strong>
<div class="ns-alert__text">Your progress is stored locally.</div></div>
</div>
<div class="ns-alert ns-alert--warning" role="status">
<i class="ph ph-warning ns-alert__icon" aria-hidden="true"></i>
<div class="ns-alert__body"><strong class="ns-alert__title">Trial org expires in 3 days</strong>
<div class="ns-alert__text">Finish the data-loader lesson before it locks.</div></div>
</div>
<div class="ns-alert ns-alert--error" role="alert">
<i class="ph ph-warning-circle ns-alert__icon" aria-hidden="true"></i>
<div class="ns-alert__body"><strong class="ns-alert__title">Deployment failed</strong>
<div class="ns-alert__text">Two test classes are below 75% coverage.</div>
<div class="ns-alert__actions"><button class="ns-btn ns-btn--outline ns-btn--sm">View log</button></div></div>
</div>Accessibility contract
- role="status" (polite) for info/success; role="alert" (assertive) only for errors
- Never role="alert" on content present at page load — it announces nothing