Orvain UI

Modal blocks

A modal is a dialog that takes the page away from the reader: it lays a scrim over everything behind it, puts one decision in front of them, and stays until they answer.

Get Pro to installPro6 blocksReact, Vue and Figma
MCPConnect the MCP server
Northwind designMembers
AR
Members22 of 20 seats · Team plan
People
ARAna RuizAdmin
KSKenji SatoEditor
MHMaximilian Hoffmann-VasquezAdded today

Every block in the set#

Error Modal

A problem the reader has to acknowledge before carrying on

Warning Modal

Destructive actions that need a deliberate confirmation

Success Modal

Confirming something finished, with the icon over the words

Information Modal

Announcements the reader only has to read

Status modal, morph

Confirmations that should feel tied to the button that asked for them

Status modal, stakes

Decisions that should be made from the facts, and destructive ones that need a deliberate press

When to use#

  • A destructive action you want someone to confirm deliberately
  • An error that has to be acknowledged before the app can carry on
  • A short form that would lose the reader's place if it took over the page
  • Announcing a change that has already happened behind the scrim

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