Alert
Tinted banner with a coloured leading bar + icon for info/success/warning/danger messages.
Preview
Info
Information:
Heads up
Your trial ends in 5 days.
<div class="nx-alert nx-alert--info" role="status" aria-live="polite"><span class="nx-sr-only">Information: </span><span class="nx-alert__icon" aria-hidden="true">ⓘ</span><div class="nx-alert__body"><div class="nx-alert__title">Heads up</div><p>Your trial ends in 5 days.</p></div></div><NxAlert variant="info" title="Heads up">Your trial ends in 5 days.</NxAlert>API
React props (NxKit)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
variant | "info"|"success"|"warning"|"danger" | "info" | Tint + role: danger renders role=alert/aria-live=assertive, others role=status/polite. | |
title | ReactNode | undefined | Bold heading line. | |
icon | ReactNode | "●" | Leading icon, aria-hidden. | |
assertive | boolean | false | Force role=alert even for a non-danger variant. |
Classes
| Class | Description |
|---|---|
.nx-alert | Base: surface-2 bg, hairline border, accent leading bar |
.nx-alert--info | Accent tint |
.nx-alert--success | Success tint |
.nx-alert--warning | Warning tint |
.nx-alert--danger | Danger tint |
Accessibility
- Mount the alert container empty, then populate its text — a polite live region only announces reliably if it already exists in the DOM before the text changes (mount-empty-then-populate, not mount-with-final-text).
- Danger (or assertive) renders role="alert"/aria-live="assertive"; others render role="status"/aria-live="polite". A visually-hidden severity word ("Error:", "Warning:", …) prefixes the text so colour is never the only signal.
Do / Don’t
- Do: Keep one alert per concern, dismissible if transient.Don’t: Don't mount an alert already carrying its final text if it needs to announce on a later update.