Orvain UI

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.

Get Pro to installPro18 blocksReact, Vue and Figma
MCPConnect the MCP server
Hover or focus pauses the timer
Northwind design/Releases

Your changes are live

Closes after 6 seconds. Hover or focus pauses it.
Drafts
Orvain UI 2.4 release notesPublished · 2 h ago
Pricing page copyIn review · Yesterday
Onboarding emailsDraft · 3 days ago

Every block in the set#

Simple Alert

Confirmations, quick status, anything that should self-dismiss

Simple Alert, ring

Quiet confirmations where the control that closes it should say when

Simple Alert, wash

Status notes that should read as part of the page, not float over it

Alert with Actions

Update prompts, confirmations that need a choice, background job results

Alert with Actions, ring

Alerts whose actions sit beside the text on wide screens

Alert with Actions, wash

A job the alert itself carries from start to finish

Expandable Alert

Longer notices that default to a preview, with an option to keep reading

Expandable Alert, ring

Notices with structured detail

Expandable Alert, wash

Notices that read like a receipt

Toast

Transient system messages, background status, compact banners

Toast, island

Apps that want one calm message at a time

Toast, lifecycle

Uploads, exports and syncs that report once

Attachment Toast

File/attachment notices, richer background-job results

Attachment Toast, upload tray

Uploading several files at once

Attachment Toast, peek

Checking an export without leaving the toast

Insight banner

Telling someone something the data noticed, at three volumes

Insight banner, volume

One insight that can be played louder or quieter

Insight banner, queue

Dashboards that notice several things at once

When to use#

  • 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

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in BlocksSee plans