Alert Dialog

A dialog that requires user response to proceed.

import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "mako-ui/components/alert-dialog";
import { Button } from "mako-ui/components/button";

export default function Particle() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="destructive" />}>
        Delete Account
      </AlertDialogTrigger>
      <AlertDialogPopup>
        <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>
          <AlertDialogClose render={<Button variant="ghost" />}>
            Cancel
          </AlertDialogClose>
          <AlertDialogClose render={<Button variant="destructive" />}>
            Delete Account
          </AlertDialogClose>
        </AlertDialogFooter>
      </AlertDialogPopup>
    </AlertDialog>
  );
}

Usage

import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "mako-ui/components/alert-dialog"

<AlertDialog>
  <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
  <AlertDialogPopup>
    <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>
      <AlertDialogClose>Cancel</AlertDialogClose>
      <AlertDialogClose>Delete Account</AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogPopup>
</AlertDialog>

API Reference

AlertDialogTrigger

Trigger button that opens the alert dialog.

AlertDialogPopup

Popup container that displays the alert dialog content. Also exported as AlertDialogContent.

Prop	Type	Default	Description
`bottomStickOnMobile`	`boolean`	`true`	When true, sticks to the bottom of the screen on mobile devices
`portalProps`	`PortalProps`	-	Props forwarded to the internal portal (`keepMounted`, `container`, etc.)

AlertDialogHeader

Container for the alert dialog title and description.

Unlike Dialog, alert dialog has no AlertDialogPanel. Put title and description in AlertDialogHeader, actions in AlertDialogFooter, and use a plain element with className if you need extra body content between them.

Prop	Type	Default	Description
`variant`	`"default" \| "bare"`	`"default"`	Controls the footer styling. `default` includes border and background, `bare` removes them

Example:

// Default variant (with border and background)
<AlertDialogFooter>
  <AlertDialogClose>Cancel</AlertDialogClose>
  <AlertDialogClose>Delete</AlertDialogClose>
</AlertDialogFooter>
 
// Bare variant (no border or background)
<AlertDialogFooter variant="bare">
  <AlertDialogClose>Cancel</AlertDialogClose>
  <AlertDialogClose>Delete</AlertDialogClose>
</AlertDialogFooter>

AlertDialogTitle

Title component.

AlertDialogDescription

Description component.

AlertDialogClose

Close button component.

AlertDialogPortal

Portal component for rendering outside the DOM hierarchy.

AlertDialogBackdrop

Backdrop/overlay component. Also exported as AlertDialogOverlay.

AlertDialogViewport

Viewport component for positioning.

Examples

Alert Dialog with Bare Footer

import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "mako-ui/components/alert-dialog";
import { Button } from "mako-ui/components/button";

export default function Particle() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="destructive" />}>
        Delete Account
      </AlertDialogTrigger>
      <AlertDialogPopup>
        <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 variant="bare">
          <AlertDialogClose render={<Button variant="ghost" />}>
            Cancel
          </AlertDialogClose>
          <AlertDialogClose render={<Button variant="destructive" />}>
            Delete Account
          </AlertDialogClose>
        </AlertDialogFooter>
      </AlertDialogPopup>
    </AlertDialog>
  );
}

Close Confirmation

"use client";

import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
} from "mako-ui/components/alert-dialog";
import { Button } from "mako-ui/components/button";
import {
  Dialog,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogPopup,
  DialogTitle,
  DialogTrigger,
} from "mako-ui/components/dialog";
import { Field } from "mako-ui/components/field";
import { Form } from "mako-ui/components/form";
import { Textarea } from "mako-ui/components/textarea";
import { useState } from "react";

export default function Particle() {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [value, setValue] = useState("");

  return (
    <Dialog
      onOpenChange={(o) => {
        if (!o && value) {
          setConfirmOpen(true);
        } else {
          setDialogOpen(o);
        }
      }}
      open={dialogOpen}
    >
      <DialogTrigger render={<Button variant="outline" />}>
        Compose
      </DialogTrigger>
      <DialogPopup showCloseButton={false}>
        <DialogHeader>
          <DialogTitle>New message</DialogTitle>
          <DialogDescription>Type something and try closing.</DialogDescription>
        </DialogHeader>
        <Form
          className="contents"
          onSubmit={(event) => {
            event.preventDefault();
            setDialogOpen(false);
          }}
        >
          <DialogPanel>
            <Field>
              <Textarea
                onChange={(e) => setValue(e.target.value)}
                value={value}
              />
            </Field>
          </DialogPanel>
          <DialogFooter>
            <DialogClose render={<Button variant="ghost" />}>
              Cancel
            </DialogClose>
            <Button
              onClick={() => {
                setValue("");
                setDialogOpen(false);
              }}
            >
              Send
            </Button>
          </DialogFooter>
        </Form>
      </DialogPopup>

      <AlertDialog onOpenChange={setConfirmOpen} open={confirmOpen}>
        <AlertDialogPopup>
          <AlertDialogHeader>
            <AlertDialogTitle>Discard changes?</AlertDialogTitle>
            <AlertDialogDescription>
              Your message will be lost.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogClose render={<Button variant="ghost" />}>
              Go back
            </AlertDialogClose>
            <Button
              onClick={() => {
                setConfirmOpen(false);
                setValue("");
                setDialogOpen(false);
              }}
            >
              Discard
            </Button>
          </AlertDialogFooter>
        </AlertDialogPopup>
      </AlertDialog>
    </Dialog>
  );
}

On This Page

Usage API Reference AlertDialog AlertDialogTrigger AlertDialogPopup AlertDialogHeader AlertDialogFooter AlertDialogTitle AlertDialogDescription AlertDialogClose AlertDialogPortal AlertDialogBackdrop AlertDialogViewport Examples Alert Dialog with Bare Footer Close Confirmation