Alert
An in-page message about something needing attention — persistent, placed where it applies, and gone only when the condition is.
UI ComponentsAn alert is the persistent counterpart to a toast. It sits in the layout next to the thing it concerns and stays there while the condition holds: a form that failed validation, an account missing a verification step, a record that conflicts with another. Because it does not remove itself, it can carry detail and an action, and the user can come back to it.
Severity should mean something. Four levels — info, success, warning, error — are enough, and they are only useful if a warning genuinely differs from an error in what happens if the user ignores it. Products that style every message as a warning because it looks more urgent end up with users who ignore all of them. Colour alone must never carry the severity: pair it with an icon and a word.
Where the alert goes
Next to what it is about. An alert at the top of a page describing a problem in a field 800 pixels down makes the user hunt. If the condition affects the whole page rather than one region, you probably want a banner.
In practice
An insurance quote form showed a red summary alert at the top listing four invalid fields. Users fixed the first, resubmitted, and got the same alert with three. Making each item in the summary a link that focused its field — and adding an inline alert beside each one — cut resubmissions per completed quote from 3.2 to 1.4.
Where teams get it wrong
- Severity by colour only, which disappears for colour-blind users and in greyscale print.
- Alerts placed far from what they describe.
- Everything styled as a warning, so nothing reads as urgent.
- A dismissible alert for a condition that is still true after dismissal — it will be back on reload, and the user learns dismissal means nothing.
- Alerts that appear on load before the user has done anything, training people to close them reflexively.
Learn more
You may ask
Frequently Asked Questions
What is the difference between an alert and a toast?
An alert is persistent and lives in the layout next to what it concerns; a toast floats over the page and removes itself. Use an alert when the condition outlasts the moment, a toast to confirm something that just happened.
Should alerts be dismissible?
Only when dismissing them is truthful — informational notices, yes. An alert about an unresolved problem should disappear when the problem does, not when the user closes it.
How many severity levels does an alert component need?
Four is plenty: info, success, warning, error. More levels than people can distinguish at a glance makes the whole scale meaningless.
Related terms
All terms- Toast NotificationA brief message that appears over the interface to confirm an action or report a problem, then disappears on its own.
- BannerA full-width message at the top of a page or app, for conditions that affect everything below it.
- Error StateWhat an interface shows when something failed — which system failed, whether the user's work survived, and what they can do next.
- Form DesignDesigning the fields, sequence, validation and error handling of a form so people can finish it without stopping to think.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us