Alerts and Toasts
Alerts and toasts are the two shapes a short status message takes: an alert holds a place in the layout and waits to be dealt with, while a toast arrives over the page and leaves on its own. The five blocks in this family cover both ends, from a one-line alert that dismisses itself, through one carrying a primary and a secondary action, to one that keeps a longer notice folded behind a chevron, and toasts in a compact label row and a richer attachment form.
The drawing is the easy half. The clock is the hard one, because an auto-dismissing message is a bet on how fast somebody reads, and you lose that bet for anyone who looked away. Pausing the countdown on hover and on focus buys the bet back, and stopping it while an expanded message is open does the same thing. Anything carrying an action should not dismiss itself at all: a person reaching for Undo and finding it gone learns not to trust the pattern.
Simple Alert
Best for
Confirmations, quick status, anything that should self-dismiss
Anatomy
Status icon · title · dismiss · a running close-countdown bar, paused on hover or focus
Your changes are live
This message will close in 6 seconds.
We couldn't publish your changes
This message will close in 6 seconds.
Alert with Actions
Best for
Update prompts, confirmations that need a choice, background job results
Anatomy
Success and error side by side · status icon · title · Update pill · dismiss · description · Primary/Secondary actions · countdown bar
Workspace backup finished
Last night's snapshot of Orvain Design System completed at 03:12 and is ready to restore from. The thirty most recent are kept, and the last two are always pinned.
This message will close in 6 seconds.
Workspace backup failed
Last night's snapshot of Orvain Design System stopped at 03:12 with 40 GB still to copy. Nothing already backed up was lost, and the run picks up where it left off.
This message will close in 6 seconds.
Expandable Alert
Best for
Longer notices that default to a preview, with an option to keep reading
Anatomy
Success and error side by side · status icon · title · dismiss · a one-line preview the chevron opens and closes, which stops the countdown while it is open
Payment method updated
Visa ending 4242 is now the card on file. The next invoice, on 1 November, will be charged to it.
This message will close in 6 seconds.
Payment method declined
Visa ending 4242 was declined by the issuing bank. The plan stays active until 1 November, so there is time to add another card.
This message will close in 6 seconds.
Toast
Best for
Transient system messages, background status, compact banners
Anatomy
One row per intent · status swatch · label · Update pill · dismiss
Q3 revenue.xlsx is ready
Q3 revenue.xlsx is missing rows
Q3 revenue.xlsx uploaded
Q3 revenue.xlsx failed to upload
Q3 revenue.xlsx has a newer version
Attachment Toast
Best for
File/attachment notices, richer background-job results
Anatomy
File-type mark · title · description · Primary/Secondary link actions · dismiss
Q3 revenue.xlsx is ready
The export covers 1 July to 30 September across all eleven regions. Its link stays good for seven days.
Insight banner
Best for
Telling someone something the data noticed, at three volumes
Anatomy
Card with an arrow button · light strip with a Review link and Dismiss · solid strip with See forecast
Using Alerts and Toasts
Reach for it when
- A background job finished while the person was somewhere else in the app
- A submission failed for a reason no single field can explain
- A change applied and you want to offer a few seconds of Undo
- System status shifted: a connection dropped, a sync resumed
Reach for something else when
- The person must answer before continuing: use a modal, which blocks until they do
- The error belongs to one field: put it under that field, where the eye already is
- The condition persists, like read-only mode. That is a banner in the layout, not a message that leaves
Where it shows up
Background job results
A report finishes generating while the person is on another screen. A toast announces it with a link to the file, and disappears if they do not want it, without stealing the click they were about to make.
Undo after deleting
A row is removed from a list and a message offers to put it back. Countdown and action are in tension here, so the message holds its place in the layout instead of timing out on someone mid-reach.
Form submission errors
A server rejects a submission over something no field owns: a duplicate account, an expired session, a payment declined upstream. An alert above the form carries the explanation and, where one exists, the action that resolves it.
Connection status
A sync drops and the app falls back to read-only. That condition persists rather than passing, so it belongs in an alert that stays until the connection returns, not a toast that leaves while the problem does not.
Questions
What is the difference between an alert and a toast?
An alert occupies space in the page layout and stays there until it is dismissed or the condition clears, so it can be read at leisure and can carry actions. A toast is layered over the interface, usually near a corner, and removes itself after a short time. Use an alert when the message must be read, and a toast when it is a courtesy.
How long should a toast stay on screen before it disappears?
Long enough for the message to be read twice at an unhurried pace, which means longer for a sentence than for two words. Pause the countdown while the pointer is over the toast or focus is inside it, and do not auto-dismiss a toast that carries an action such as Undo, because someone reaching for it after the timer expires has lost the ability to act.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPAlerts and Toasts
Alerts and toasts are the two shapes a short status message takes: an alert holds a place in the layout and waits to be dealt with, while a toast arrives over the page and leaves on its own. The five blocks in this family cover both ends, from a one-line alert that dismisses itself, through one carrying a primary and a secondary action, to one that keeps a longer notice folded behind a chevron, and toasts in a compact label row and a richer attachment form.
The drawing is the easy half. The clock is the hard one, because an auto-dismissing message is a bet on how fast somebody reads, and you lose that bet for anyone who looked away. Pausing the countdown on hover and on focus buys the bet back, and stopping it while an expanded message is open does the same thing. Anything carrying an action should not dismiss itself at all: a person reaching for Undo and finding it gone learns not to trust the pattern.
Simple Alert
Best for
Confirmations, quick status, anything that should self-dismiss
Anatomy
Status icon · title · dismiss · a running close-countdown bar, paused on hover or focus
Your changes are live
This message will close in 6 seconds.
We couldn't publish your changes
This message will close in 6 seconds.
Alert with Actions
Best for
Update prompts, confirmations that need a choice, background job results
Anatomy
Success and error side by side · status icon · title · Update pill · dismiss · description · Primary/Secondary actions · countdown bar
Workspace backup finished
Last night's snapshot of Orvain Design System completed at 03:12 and is ready to restore from. The thirty most recent are kept, and the last two are always pinned.
This message will close in 6 seconds.
Workspace backup failed
Last night's snapshot of Orvain Design System stopped at 03:12 with 40 GB still to copy. Nothing already backed up was lost, and the run picks up where it left off.
This message will close in 6 seconds.
Expandable Alert
Best for
Longer notices that default to a preview, with an option to keep reading
Anatomy
Success and error side by side · status icon · title · dismiss · a one-line preview the chevron opens and closes, which stops the countdown while it is open
Payment method updated
Visa ending 4242 is now the card on file. The next invoice, on 1 November, will be charged to it.
This message will close in 6 seconds.
Payment method declined
Visa ending 4242 was declined by the issuing bank. The plan stays active until 1 November, so there is time to add another card.
This message will close in 6 seconds.
Toast
Best for
Transient system messages, background status, compact banners
Anatomy
One row per intent · status swatch · label · Update pill · dismiss
Q3 revenue.xlsx is ready
Q3 revenue.xlsx is missing rows
Q3 revenue.xlsx uploaded
Q3 revenue.xlsx failed to upload
Q3 revenue.xlsx has a newer version
Attachment Toast
Best for
File/attachment notices, richer background-job results
Anatomy
File-type mark · title · description · Primary/Secondary link actions · dismiss
Q3 revenue.xlsx is ready
The export covers 1 July to 30 September across all eleven regions. Its link stays good for seven days.
Insight banner
Best for
Telling someone something the data noticed, at three volumes
Anatomy
Card with an arrow button · light strip with a Review link and Dismiss · solid strip with See forecast
Using Alerts and Toasts
Reach for it when
- A background job finished while the person was somewhere else in the app
- A submission failed for a reason no single field can explain
- A change applied and you want to offer a few seconds of Undo
- System status shifted: a connection dropped, a sync resumed
Reach for something else when
- The person must answer before continuing: use a modal, which blocks until they do
- The error belongs to one field: put it under that field, where the eye already is
- The condition persists, like read-only mode. That is a banner in the layout, not a message that leaves
Where it shows up
Background job results
A report finishes generating while the person is on another screen. A toast announces it with a link to the file, and disappears if they do not want it, without stealing the click they were about to make.
Undo after deleting
A row is removed from a list and a message offers to put it back. Countdown and action are in tension here, so the message holds its place in the layout instead of timing out on someone mid-reach.
Form submission errors
A server rejects a submission over something no field owns: a duplicate account, an expired session, a payment declined upstream. An alert above the form carries the explanation and, where one exists, the action that resolves it.
Connection status
A sync drops and the app falls back to read-only. That condition persists rather than passing, so it belongs in an alert that stays until the connection returns, not a toast that leaves while the problem does not.
Questions
What is the difference between an alert and a toast?
An alert occupies space in the page layout and stays there until it is dismissed or the condition clears, so it can be read at leisure and can carry actions. A toast is layered over the interface, usually near a corner, and removes itself after a short time. Use an alert when the message must be read, and a toast when it is a courtesy.
How long should a toast stay on screen before it disappears?
Long enough for the message to be read twice at an unhurried pace, which means longer for a sentence than for two words. Pause the countdown while the pointer is over the toast or focus is inside it, and do not auto-dismiss a toast that carries an action such as Undo, because someone reaching for it after the timer expires has lost the ability to act.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
