Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Usage

Import all parts and piece them together. It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
const {
  Dialog,
  DialogOverlay,
  DialogTrigger,
  DialogClose,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
  dialogContentClassname,
} = VM.require("uiisnear.near/widget/dialog");
 
if (Tailwind == undefined) return "";

<Tailwind>
  <Dialog>
    <DialogTrigger>Open</DialogTrigger>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Are you absolutely sure?</DialogTitle>
        <DialogDescription>
          This action cannot be undone. This will permanently delete your account
          and remove your data from our servers.
        </DialogDescription>
      </DialogHeader>
    </DialogContent>
  </Dialog>
</Tailwind>

API Reference

Dialog

Contains all the parts of a dialog.

Prop	Type	Default
defaultValue	boolean	---
open	boolean	---
onOpenChange	function	---
modal	boolean	true

DialogTrigger

The button that opens the dialog.

Data attribute	Values
[data-state]	"open" \| "closed"

DialogOverlay

A layer that covers the inert portion of the view when the dialog is open.

Prop	Type	Default
forceMount	boolean	---

Data attribute	Values
[data-state]	"open" \| "closed"

DialogContent

Contains content to be rendered in the open dialog.

Prop	Type	Default
forceMount	boolean	---
onOpenAutoFocus	function	---
onCloseAutoFocus	function	---
onEscapeKeyDown	function	---
onPointerDownOutside	function	---
onInteractOutside	function	---

Data attribute	Values
[data-state]	"open" \| "closed"

DialogClose

The button that closes the dialog.

DialogHeader

Contains all the parts of the header (DialogTitle and DialogDescription).

DialogTitle

An accessible title to be announced when the dialog is opened.

DialogDescription

An optional accessible description to be announced when the dialog is opened.

DialogFooter

Contains all the parts of the footer (Save button, Cancel button).

Classnames

Classnames available to customize the component.

Function	Classname
DialogOverlay	dialogOverlayClassname
DialogContent	dialogContentClassname
DialogHeader	dialogHeaderClassname
DialogFooter	dialogFooterClassname
DialogTitle	dialogTitleClassname
DialogDescription	dialogDescriptionClassname

Examples

Close after asynchronous submission

Use the controlled props to programmatically close the Dialog after an async operation has completed.

Context Menu Dropdown Menu