Alerts and Toasts
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 October, 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 October, 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.
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.Alerts and Toasts
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 October, 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 October, 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.
Be first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.