UI components · Feedback
Toast
Also called: Snackbar, Message, Toast notification, Flash message
A short one-line message that appears briefly at the top or bottom of the screen after an action, then disappears after a few seconds without interrupting the user.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstAfter "Save" succeeds, show a toast that says "Saved" at the top center of the page, with a check icon on the left, and fade it out after 3 seconds. On failure, show a red X icon and "Couldn't save. Please try again." When several toasts show up at once, stack them downward, and don't cover the main action buttons.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Toast is what you need.
Use Toast when
- After save, copy, delete, or similar actions, one sentence is enough to report the result
- The result needs no decision from the user; they glance at it and keep going
- The action can be undone, and you want to include an "Undo" link in the message
Pick something else when
The error needs to be read carefully or acted on, and a few seconds isn't enough time
Use insteadForm ValidationThe message needs to stay on the page, like an unverified account or a quota that's about to run out
The message has a title and several lines of text, or the user needs to click into it for details
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Reporting form validation errors with just a toast, so users don't know which field is wrong
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Firing a pile of toasts in a row that fill up the top of the page
- 03
Showing an important failure as a toast that vanishes in seconds, before the user ever sees it
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A small floating bar with a status icon and one line of text, sometimes with a single action on the right, such as "Undo".
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A toast tells the user "the thing you just did has a result," like "Saved," "Copied," or "Network error, please try again." It usually has just a status icon and one sentence, shows up at the top center or the bottom of the screen, and disappears after 2 to 3 seconds. The user doesn't need to click anything. Ant Design and Element Plus call it Message, MUI calls it Snackbar, and libraries like sonner and react-hot-toast just call it Toast.
How the three feedback components differ: a toast is one temporary sentence that goes away on its own. An Alert is a fixed bar inside the page that stays until the problem is solved. A Notification pops in from the top-right corner with a title and several lines of text, for more important messages the user should notice.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-toast- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-message-notice.el-message[class*="MuiSnackbar-root"].arco-message.t-message.n-message[data-sonner-toast].van-toast.toast:not(:has(.toast-header))
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026