USER INTERFACE · FEEDBACK

Alerts

Messages that stay on the page until the user deals with them. Everything here is live.
THEME
DENSITY
01

Playground

Change the settings — compare with the default
COMPARE2 differences
DEFAULT
i
New version of the briefLena updated the moodboard 10 minutes ago.
YOURS
!
Storage almost full1.62 of 2 TB used — uploads stop at 100%.
Settings
TYPE
default: Info
STYLE
default: Soft
SIZE
default: M
DIFF FROM DEFAULT
− type="info"+ type="warning"+ <Alert.Action>
02

Variants

5 types × 5 styles
SOFTOUTLINESOLIDLEFT BARMINIMALInfo
i
New version of the brief
i
New version of the brief
i
New version of the brief
i
New version of the brief
i
New version of the brief
Success
✓
Invoice sent
✓
Invoice sent
✓
Invoice sent
✓
Invoice sent
✓
Invoice sent
Warning
!
Storage almost full
!
Storage almost full
!
Storage almost full
!
Storage almost full
!
Storage almost full
ErrorNeutral
•
Heads up
•
Heads up
•
Heads up
•
Heads up
•
Heads up
03

Anatomy & content

From one line to progress and timers
Text onlyicon · one line
i
The client portal is in beta — tell us what you think.
Title + texttitle 14/800 · body 13.5
✓
Proposal acceptedNordic Thread signed DL-0231 · €38,600. The deposit invoice is ready.
Error listbullets · role=alert
With actionsprimary + ghost buttons
!
Unsaved changesYou edited 3 fields on this deal.
Progresslive · Cancel
i
Uploading selectsSpring 27 / Selects
3 of 12
Auto-dismiss5 s · pauses on hover
✓
Changes savedCloses in 5 s · hover to pause
04

Placement

Where alerts live in the product
Scheduled maintenance · Sat, Oct 24 · 02:00–03:00 CET — uploads will pause
AVAVATopbarSYSTEM STRIP ↑ · PAGE BANNER ↓
!
Your trial ends in 3 daysPick a plan to keep projects, files and client links.
INLINE · IN A FORM
INSIDE A CARD
NTSpring 27 campaignPost-production · 69%
!
3 tasks overdueRetouch, BTS cut and licence draft.
ABOVE A TABLE
AV-041Nordic ThreadOverdue
AV-040Kaya CeramicsOverdue
AV-039Fjord OutdoorViewed
TOASTS · STACK
app viewport · bottom-right
Trigger a toast above
Max 4 · newest at the bottom · 5 s each · ✕ to dismiss
05

In Avava

Real messages — the actions work
Invoice listAV-2026-040 · Kaya Ceramics
CalendarThu, Oct 22
!
Alex is double-bookedNordic check-in overlaps the Fjord shoot at 11:00.
File managerStudio storage
!
Storage 81% full1.62 of 2 TB used. Archive old projects or add space.
Project · Spring 27Client review
i
Lena left 3 comments“More blue in the shadows?” and 2 more on Hero 04.
SettingsAccount
✓
Two-factor turned onBackup codes were downloaded. Keep them somewhere safe.
06

Behaviour & a11y

Dismiss, roles and contrast
Dismiss✕ or Esc closes the last one
i
Brief updatedLena changed the deadline to Oct 27.
!
Weather alertRain expected on the Friday shoot.
Roles & live regions
Errorrole="alert" aria-live="assertive"blocks the task
Warningrole="status" aria-live="polite"may block soon
Successrole="status" aria-live="polite"for information
Inforole="status" aria-live="polite"for information
Neutralrole="status" aria-live="polite"for information
Errors interrupt screen readers (assertive). Everything else waits its turn (polite). Never put focus inside an alert automatically.
ContrastDark theme · soft style
Info — sample text11.2 : 1AA
Success — sample text10.4 : 1AA
Warning — sample text10.9 : 1AA
Error — sample text6.1 : 1AA
Neutral — sample text8.4 : 1AA
AlertStays on the page in context until the problem is solved or dismissed.Form errors, overdue invoice, trial ending
ToastConfirms something that just happened; disappears by itself, offers Undo.Saved, sent, uploaded
ModalStops everything — the user must decide before going on.Delete project, unsaved changes
DO✓Say what happened and what to do next✓One primary action, in the alert’s colour✓Put the alert next to what it is about✓Use Error only when something is blocked✓Let people dismiss anything that isn’t blocking
DON’T✕Stack more than two alerts in one place✕Auto-hide errors✕Use Solid for anything but page-level banners✕Write “Error” as the title — say what failed✕Move focus into an alert automatically