Design Toast, Banner, or Modal Decisions
Feedback & States · notifications, modals, status
Updated 2026-07-28
- Pick the container from two questions: does the user have to act, and does the message stop being true. Everything else follows.
- Use the right one for the job:
Inline message
- The problem belongs to one field or one section.
- It stays until the underlying issue is fixed.
Toast
- Confirms something that already happened.
- Needs no action, or offers one optional undo.
- Disappears on its own.
Banner
- Applies to the whole page or account.
- Stays until the condition changes.
Modal
- The user genuinely cannot continue without deciding.
- Never put a required action in a toast. A message that vanishes on a timer cannot carry the only route to fixing something.
- Never use a modal for information. If there is nothing to decide, a modal is just an obstacle with an acknowledgement button.
- Keep validation next to the field. A toast that says a form is invalid makes the user hunt for which part.
- Allow enough time to read, and pause the timer on hover or focus. Four seconds is not enough for a message with a link in it.
- Stack and collapse repeats. Five identical toasts from one failed batch is one message with a count.
Choosing the wrong container is why interfaces feel naggy, and it is usually a decision made by habit rather than by need.
Related guides
UX Handbook