Components / Feedback
Tell the truth, then get out of the way.
Toasts are transient — 4-second auto-dismiss for success/info, 8-second for warning, sticky for danger. Banners persist until dismissed or the underlying state clears. Modals are blocking by design — operators must confirm or cancel.
Toast
Report submitted
Routed to the on-duty supervisor.
SLA approaching
Triage due in 30 minutes.
Submission failed
Network error. Saved as draft locally.
2 new reports awaiting your review
4 variants · raised card shadow stackSuccess/Info auto 4s · Warning 8s · Danger sticky
Banner — persistent inline notification
Scheduled maintenance Saturday 22:00 — submissions paused for ~30 min.
Your password expires in 5 days. Update from Settings → Security.
Sign-in service is degraded. Some users may see intermittent failures.
10/14 padding · 6px radius · semantic tint bgPersists until dismissed or state clears
Modal — blocking confirmation
Click trigger above · ESC or backdrop click closesUse sparingly — destructive or irreversible actions only
Empty state
No reports yet.
Submitted hazards land here. Field operators can submit from the mobile app or the web form.
40px padding · centered · 24px Lucide glyphAlways pair empty-state with a CTA
Toasts are transient. Banners persist. Modals block. The wrong primitive in the wrong role is the difference between "annoying" and "operational risk."