Banners overview
Concise feedback that explains what changed and what to do next.
Design thinking
Feedback should be visible without dominating a dense workspace. Banners explain a persistent condition near affected content; toasts acknowledge transient events without becoming the only place important information exists.
Size and spacing
2.375rem single line (38px reference). A 1.375rem line box plus .5rem vertical insets gives the 2.375rem single-line reference. Descriptions and action rows increase height naturally. Align the leading icon with the first text line instead of centering it against a long paragraph.
Interaction and motion
Use polite announcements for ordinary updates and urgent alerts only when interruption is necessary. Dismissal and recovery are named actions. Entrance and exit use shared motion and honor reduced motion without delaying access to the message.
Best practices
- Explain the condition and a concrete next step. Avoid vague messages such as 'Something happened'.
- Keep actionable errors near the affected field or region even if a toast also announces them.
- Reserve destructive styling for genuine failure or risk; do not communicate severity with color alone.
- Allow wrapping and avoid stacking multiple notifications for the same event. Do not hide required decisions behind a timeout.