Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

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 { Button, ButtonConf } = VM.require("uiisnear.near/widget/button");
 
const {
  AlertDialog,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} = VM.require("uiisnear.near/widget/alertDialog");
 
if (Tailwind == undefined) return "";
if (ButtonConf == undefined) return "";
 
const [buttonCancel, setButtonCancel] = useState("");
const [buttonContinue, setButtonContinue] = useState("");
 
if (buttonCancel === "")
  return (
    <ButtonConf
      output={setButtonCancel}
      variant="outline"
      className="w-full sm:w-fit"
    />
  );
if (buttonContinue === "")
  return (
    <ButtonConf
      output={setButtonContinue}
      className="w-full sm:w-fit mb-2 sm:mb-0"
    />
  );

<Tailwind>
  <AlertDialog>
    <AlertDialogTrigger>Open</AlertDialogTrigger>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
        <AlertDialogDescription>
          This action cannot be undone. This will permanently delete your account
          and remove your data from our servers.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel className={buttonCancel}>
          Cancel
        </AlertDialogCancel>
        <AlertDialogAction className={buttonContinue}>
          Continue
        </AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</Tailwind>

API Reference

AlertDialog

Contains all the parts of an alert dialog.

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

AlertDialogTrigger

A button that opens the dialog.

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

AlertDialogOverlay

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"

AlertDialogContent

Contains content to be rendered when the dialog is open.

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

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

Classnames

Classnames available to customize the component.

Function	Classname
AlertDialogOverlay	alertDialogOverlayClassname
AlertDialogContent	alertDialogContentClassname
AlertDialogHeader	alertDialogHeaderClassname
AlertDialogFooter	alertDialogFooterClassname
AlertDialogTitle	alertDialogTitleClassname
AlertDialogDescription	alertDialogDescriptionClassname

Examples

Close after asynchronous submission

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

Alert Aspect Ratio