Design System · Component Proposal

Contextual Status Banner

A full-width, persistent notification that surfaces an unresolved system state requiring user action — visible but non-blocking. Three variants cover the full range of urgency.

Anatomy
⚠️
Schedule changes are going live without your review.
Supervisors can make changes that affect payroll without your visibility.
✕
A — Icon
Communicates severity independently of colour. Required for accessibility.
B — Message body
Title (bold) + optional supporting line. Max 2 lines total.
C — Primary CTA
Right-aligned. Required on Warning + Critical. Absent on Resolved.
D — Dismiss (✕)
Available on Warning only. Hidden on Critical. Auto on Resolved.
Variants
Warning
An unresolved state that will cause problems if not addressed. User can dismiss and return later. Used in Step 4 — approval settings not configured.
Action Recommended
Dashboard Schedule Employees
Page content
Page content
Page content
Background
#FFFBEA
Border bottom
2px solid #F5C842
Dismissible
Yes — persists across sessions until resolved
Critical
An active problem causing immediate harm — payroll error, compliance violation, or data loss risk. No dismiss option. Action is required before the user can move on.
Action Required
Dashboard Schedule Employees
Page content
Page content
Page content
Background
#FEF2F2
Border bottom
2px solid #F87171
Dismissible
No — persists until the underlying issue is resolved in the system
Resolved
Confirms that a previously flagged issue has been fixed. No action needed. Auto-dismisses after 4 seconds. Replaces Warning or Critical in place so layout doesn't shift.
Resolved
Dashboard Schedule Employees
Page content
Page content
Page content
Background
#F0FDF8
Border bottom
2px solid #00CC88
Dismissible
Auto-dismisses after 4 seconds. No manual dismiss needed.
Design System Notes
Accessibility
Banner requires role="alert" on Critical and role="status" on Warning/Resolved. Dismiss button needs aria-label="Dismiss warning". Colour alone never carries meaning — icon + text label always present.
Layout behaviour
Banner sits between the top nav and page content. On dismiss or auto-resolve, it collapses with a smooth height transition so page content doesn't jump.
Props (for dev handoff)
variant: warning | critical | resolved
title: string (required)
body: string (optional)
ctaLabel: string
onCtaClick: function
dismissible: boolean
Reuse candidates
Payroll integration not connected (Step 5 skipped) · Shift published understaffed · Compliance threshold breached · Billing issue on account · Any persistent unresolved system state.