AlertDialog

Display a modal with important content that expects confirmation from the user.

#
Documentation

#
Usage

Use the open and defaultOpen props to toggle between controlled and uncontrolled usage. And combine it with onOpenChange to listen for changes to the state.

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogTrigger,
  Flex,
  Text,
} from "@optiaxiom/react";
import { useEffect, useState } from "react";
 
export function App() {
  const [open, setOpen] = useState(false);
  const [state, setState] = useState("");
 
  useEffect(() => {
    if (open) {
      setState("");
    }
  }, [open]);
 
  return (
    <Flex flexDirection="row">
      <AlertDialog onOpenChange={setOpen} open={open}>
        <AlertDialogTrigger>Delete comment</AlertDialogTrigger>
 
        <AlertDialogContent>
          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
 
          <AlertDialogDescription>
            The comment and all replies will be deleted.
          </AlertDialogDescription>
 
          <AlertDialogFooter>
            <AlertDialogCancel />
 
            <AlertDialogAction onClick={() => setState("confirm")}>
              Yes, delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
 
      {state && (
        <Text>
          Clicked <strong>{state}</strong>
        </Text>
      )}
    </Flex>
  );
}

#
Sizes

Use the size prop to change the size of the dialog box.

Size

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@optiaxiom/react";
import { type ComponentPropsWithRef } from "react";
 
export function App({
  size,
}: Pick<ComponentPropsWithRef<typeof AlertDialogContent>, "size">) {
  return (
    <AlertDialog>
      <AlertDialogTrigger>Delete comment</AlertDialogTrigger>
 
      <AlertDialogContent size={size}>
        <AlertDialogTitle>Are you sure?</AlertDialogTitle>
        <AlertDialogDescription>
          The comment and all replies will be deleted.
        </AlertDialogDescription>
        <AlertDialogFooter>
          <AlertDialogCancel />
          <AlertDialogAction>Yes, delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

#
Loading

#
Handling async events

We can prevent closing the dialog in the action button’s onClick handler to perform async operations.

Make sure to use the controlled props and call event.preventDefault() in your action to stop the modal from being dismissed.

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [loading, setLoading] = useState(false);
  const [open, setOpen] = useState(false);
 
  return (
    <AlertDialog
      onOpenChange={
        /**
         * 3. Make sure to disable closing the modal.
         */
        loading ? undefined : setOpen
      }
      open={open}
    >
      <AlertDialogTrigger>Delete task</AlertDialogTrigger>
 
      <AlertDialogContent>
        <AlertDialogTitle>Are you sure?</AlertDialogTitle>
        <AlertDialogDescription>
          The task and all contents will be deleted. This action cannot be
          undone.
        </AlertDialogDescription>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={loading} />
          <AlertDialogAction
            loading={loading}
            onClick={(event) => {
              /**
               * 1. Prevent the modal from being dismissed.
               */
              event.preventDefault();
 
              /**
               * 2. Set your loading state and perform your async operation.
               */
              setLoading(true);
              setTimeout(() => {
                setLoading(false);
 
                /**
                 * 4. Close the modal manually once the operation is complete.
                 */
                setOpen(false);
              }, 3000);
            }}
          >
            Yes, Delete
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

#
Trigger

#
Customize trigger

By default we use the Button component for the dialog trigger which accepts all of the existing button props.

We can also completely change the trigger by using asChild and passing our own component.

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@optiaxiom/react";
import { IconTrash } from "@tabler/icons-react";
 
export function App() {
  return (
    <AlertDialog>
      <AlertDialogTrigger
        appearance="danger-outline"
        aria-label="Delete task"
        icon={<IconTrash />}
      />
 
      <AlertDialogContent>
        <AlertDialogTitle>Are you sure?</AlertDialogTitle>
        <AlertDialogDescription>
          Are you sure you want to delete this task?
        </AlertDialogDescription>
        <AlertDialogFooter>
          <AlertDialogCancel />
          <AlertDialogAction>Yes, Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}