AlertDialog

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogBody,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTrigger,
} from "@optiaxiom/react";
 
export function App() {
  return (
    <AlertDialog>
      <AlertDialogTrigger>Delete comment</AlertDialogTrigger>
 
      <AlertDialogContent>
        <AlertDialogHeader>Delete comment?</AlertDialogHeader>
 
        <AlertDialogBody>
          The comment and all replies will be deleted.
        </AlertDialogBody>
 
        <AlertDialogFooter>
          <AlertDialogCancel />
          <AlertDialogAction>Yes, delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogBody,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTrigger,
} from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [open, setOpen] = useState(false);
 
  return (
    <AlertDialog onOpenChange={setOpen} open={open}>
      <AlertDialogTrigger>Delete comment</AlertDialogTrigger>
 
      <AlertDialogContent>
        <AlertDialogHeader>Delete comment?</AlertDialogHeader>
 
        <AlertDialogBody>
          The comment and all replies will be deleted.
        </AlertDialogBody>
 
        <AlertDialogFooter>
          <AlertDialogCancel />
          <AlertDialogAction>Yes, delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogBody,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  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}>
        <AlertDialogHeader>Are you sure?</AlertDialogHeader>
        <AlertDialogBody>
          The comment and all replies will be deleted.
        </AlertDialogBody>
        <AlertDialogFooter>
          <AlertDialogCancel />
          <AlertDialogAction>Yes, delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

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

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogBody,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  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>
        <AlertDialogHeader>Are you sure?</AlertDialogHeader>
        <AlertDialogBody>
          The task and all contents will be deleted. This action cannot be
          undone.
        </AlertDialogBody>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={loading} />
          <AlertDialogAction
            disabled={loading}
            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>
  );
}

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogBody,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
  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>
        <AlertDialogHeader>Are you sure?</AlertDialogHeader>
        <AlertDialogBody>
          Are you sure you want to delete this task?
        </AlertDialogBody>
        <AlertDialogFooter>
          <AlertDialogCancel />
          <AlertDialogAction>Yes, Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}