Modal

A 440px surface over a blurred 40% overlay: a Status Modal with an Error, Warning, Success or Information icon, or a header, a body and a footer assembled from the kit. It holds focus until it is answered or dismissed.

DesignReactVuePrompts

Copy

Insert Status Modal Title

Insert your status modal description here. It would look better as two lines of text.

Open as dialog

1

2

3

4

5

6

7

8

9

10

11

12

13

import { ConfirmModal } from '@orvain/react';
 
<ConfirmModal
  open={open}
  onOpenChange={(next) => setOpen(next)}
  tone="warning"
  title="Delete project?"
  description="This can't be undone."
  confirmLabel="Delete"
  cancelLabel="Cancel"
  intent="error"
  onConfirm={() => remove()}
/>

Add an error Orvain Status Modal, left aligned, titled “Insert Status Modal Title” with the description “Insert your status modal description here. It would look better as two lines of text.”, and a footer with a “Don’t show it again” checkbox, “Cancel” and “Continue”.

Orvain MCPIncluded with the library

When to use#

• To confirm a destructive or irreversible action before it happens.
• For a short task that must finish before the page makes sense again, such as naming a new project.

When not to use

• Use an inline Alert or a toast for information that needs no decision.
• Use a page for long forms or anything people may want to link to.

Anatomy#

States#

Source#

Preview – final code pending

The Modal is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is publishedGet notified when the source is published

Used in these blocks