System Alert
System Alert component displays page level notifications about important system wide events, updates, warnings, or errors. It ensures users are informed of critical information.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features5 checks
- Uses role="alert" for errors and role="status" for non-urgent notices
- Colour contrast ratios meet 4.5:1 for text content (WCAG 1.4.3)
- Severity is conveyed by icon and text, never by colour alone (WCAG 1.4.1)
- Dismiss control is a real button with an accessible name
- Placed at the start of the page so it is reached early in the tab order
When to use this component
✓Do's
- •The message affects the whole service, not one form or section
- •You need to announce planned maintenance, an outage, or a policy change
- •Users should see it regardless of which page they land on
- •The notice belongs at the top of the page, above the main content
✗Don'ts
- •The message is about one field or section, use Context Alert in place
- •It reports the result of an action the user just took, that is contextual
- •You need the user to decide before continuing, use Modal
- •It would sit there permanently, users learn to ignore a bar that never changes
Do's and Don'ts
Scheduled maintenanceUnavailable Sunday 26 July, 01:00–04:00 IST. Submit before 00:30 to avoid delays.
Give the window and what the user should do about it. A dated, specific notice lets people plan around the disruption.
NoticeThe system may be down for maintenance sometime soon.
Don't publish a vague warning. Without a time or an instruction it creates anxiety and drives avoidable support calls.
Payment gateway unavailableYour application has been saved as a draft. Try paying again after 15:00.
Reassure the user that their work is safe, then tell them when to return. Outages are less damaging when nothing is lost.
WelcomeExplore the new portal.
MaintenanceSunday.
OutagePayments down.
Don't stack system bars. They push the actual page below the fold and the most urgent message loses its prominence.