Notification Modal
A modal variant used to surface system-level notifications that require user acknowledgement. Use for high-priority messages that must interrupt the user's current flow. Don't use for routine feedback — use Alert instead.
FigmaDescription
Notification Modal surfaces a system-level message that requires explicit user acknowledgement before they can continue. It is a modal overlay, not an inline component.
Session expiry warnings, terms of service updates, critical system status changes, or mandatory onboarding notices that must be seen before a user proceeds.
Some messages cannot be passively received — they need deliberate acknowledgement. Notification Modal creates that moment without requiring a full page navigation.
Notification Modal vs Modal
| Notification Modal | Modal | |
|---|---|---|
| Trigger | System-initiated — the system decides when to show it, not a user action | User-initiated — triggered by a user action (clicking Delete, Edit, etc.) |
| Icon | Always present — reinforces the type and urgency of the message | Optional — used for destructive variants only |
| Actions | Typically one action (OK / Acknowledge) or a choice (Accept / Decline) | Two actions (primary + cancel/secondary) |
| Dismissal | Often non-dismissible — the message must be acknowledged | Always has a close button and backdrop dismiss |
| Content | System message — neutral tone, describes a state or change | Task-focused — directly related to what the user was doing |
Notification Modal vs Alert
| Notification Modal | Alert | |
|---|---|---|
| Interrupts flow | Yes — page interaction is blocked until acknowledged | No — appears inline, user can continue |
| Requires action | Yes — must be dismissed explicitly | No — may be informational only |
| Urgency | High — used when the message cannot be missed | Variable — success to critical error |
Anatomy
| Part | Required? | Notes |
|---|---|---|
| Backdrop | Required | Semi-transparent overlay. Unlike Modal, clicking it does not dismiss the Notification Modal. |
| Icon | Required | Reinforces the type of notification — info, warning, or error. Never decorative-only; always meaningful. |
| Title | Required | A clear, direct headline describing the notification. Referenced by aria-labelledby. |
| Message | Required | Plain language explanation. State what happened, what it means, and what (if anything) the user needs to do. |
| Primary action | Required | "OK", "Got it", "Accept", or similar. This is the only required action. Add a secondary action only when a genuine choice exists. |
Usage guidelines
When to use
- A system-level event has occurred that the user must be aware of before continuing.
- Legal, terms, or policy changes that require explicit acknowledgement.
- A session is about to expire or has already expired.
- A critical integration or dependency has changed that affects the user's current work.
When not to use
- For feedback after a user action — use Alert.
- For decisions the user initiates — use Modal.
- For marketing or promotional messages — do not use an interrupting modal for non-essential content.
- More than once per session for the same type of message — repeated interruptions cause users to dismiss without reading.
Do / Don't
Do
Write messages in plain language. "Your session will expire in 5 minutes. Save your work to avoid losing changes." Not "Session timeout warning".
Don't
Don't use Notification Modal for anything that can be shown inline. The interruption cost is high — only use it when missing the message would have real consequences.
Do
Give the user agency where possible. "Renew session" and "Log out now" is better than a single "OK" when a meaningful choice exists.
Don't
Don't stack Notification Modals. If multiple system events fire simultaneously, queue them or consolidate into a single notification.
Layout & Spacing
Notification Modal is narrower than Modal and centred both horizontally and vertically. Content is centred within the modal — icon above title above message above action — giving it a deliberate, formal character distinct from task-oriented modals.
| Element | Spec |
|---|---|
| Width | 400px max, 90vw on small screens |
| Padding | --op-space-32 all sides |
| Icon size | 48×48px, centred |
| Icon margin-bottom | --op-space-16 |
| Title font size | --op-text-lg, font-weight: 600, centred |
| Message font size | --op-text-sm, centred |
| Border radius | --op-radius-lg |
| Element | Token |
|---|---|
| Background | --op-color-bg-primary |
| Backdrop | --op-color-bg-overlay |
| Title text | --op-color-text-primary |
| Message text | --op-color-text-secondary |
| Info icon background | --op-color-status-info-bg |
| Warning icon background | --op-color-status-warning-bg |
| Error icon background | --op-color-status-error-bg |
Engineering notes
- Use
role="alertdialog"when the notification describes a critical error — this causes screen readers to announce the message more urgently thanrole="dialog". - When acknowledgement is mandatory, do not add backdrop click dismissal. The user must engage with the action button.
- Always move focus into the modal on open — system-initiated modals can appear while the user is anywhere on the page.
Keyboard interaction
| Key | Action |
|---|---|
| Tab | Moves focus between action buttons. Focus is trapped within the modal. |
| Enter or Space | Activates the focused button. |
| Escape | Closes the modal only if a close path is available. When acknowledgement is mandatory, Escape does nothing. |
Why it matters
Notification Modals are system-initiated — the user didn't ask for them. This makes focus management especially important: when the modal opens, focus must move immediately into it, and the first thing announced must clearly explain what has happened. A screen reader user who opens a page and suddenly hears nothing — because the modal appeared but focus stayed on the page — receives no information about a potentially critical system event.
ARIA — dialog vs alertdialog
| Role | When to use | Announcement behaviour |
|---|---|---|
role="dialog" |
Standard notifications: session expiry, terms updates, feature announcements | Polite — announces after the current reading context finishes |
role="alertdialog" |
Critical errors that require immediate action: data loss risk, authentication failure, sync errors | Assertive — interrupts reading immediately |
Watch out
Don't use role="alertdialog" for routine notifications. Assertive interruption is disruptive for screen reader users — reserve it for situations where the user genuinely needs to act immediately to prevent harm or data loss.
Things to avoid
- Don't auto-open Notification Modals on page load unless the event is genuinely critical. Let the page settle before interrupting.
- Don't allow the backdrop to be clicked when acknowledgement is mandatory. The user must engage with the content.
- Don't omit the icon's colour and shape variation just to keep design clean — these signals are critical for users with visual impairments who can distinguish shapes but not colours.
- Don't use
role="alertdialog"without also ensuring focus moves into the modal on open — an assertive live region that doesn't receive focus still loses context on some screen readers.