Context Alert
An inline alert component for communicating status, warnings, or contextual information within a page.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features5 checks
- Uses role="alert" or role="status" based on urgency level
- Color contrast ratios meet 4.5:1 for text content (WCAG 1.4.3)
- Does not rely on color alone to convey alert severity
- Leading icon provides additional visual cue beyond color
- Action buttons are keyboard-accessible with visible focus states
When to use this component
✓Do's
- •The message relates to a specific part of the page the user is working in
- •You need to report the outcome of an action the user just took
- •The alert carries supporting detail, progress, or follow-up actions
- •The user should be able to read it in place without losing their context
✗Don'ts
- •The notice applies to the whole service or site, use System Alert instead
- •The user must respond before continuing, use Modal so the choice is explicit
- •It is a short, transient confirmation, a toast is lighter and less intrusive
- •You are stacking several at once, users stop reading after the first
Do's and Don'ts
Name what failed and what the user should do next. Keep blocking errors non-dismissible so the message survives until it is resolved.
Don't leave the user guessing. A generic message gives no route to recovery and forces a support call.
Pair the warning with the action that resolves it, so the user can act without hunting for the control.
Don't stack alerts. Show the most urgent one, or group the detail into a single alert with a clear heading.