🌴Ocean UI
Base components

Alert Dialog

A modal dialog for critical confirmations or destructive actions. Requires explicit dismissal (button or Escape); cannot be closed by clicking outside. Built with Ark UI Dialog (role="alertdialog") and Ocean UI design tokens.

@ark-ui/react/dialog

Example

How to install and use

1

Complete the manual installation setup

If you haven't already completed the first 4 steps of the manual installation guide, please do so before continuing to install these components.

2

Create a alert-dialog.tsx file and paste the following code into it.

/components/ui/alert-dialog.tsx

import { Dialog } from "@ark-ui/react/dialog";
import type { ComponentProps } from "react";

import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/alert-dialog";

function AlertDialogRoot(
  props: ComponentProps<typeof Dialog.Root>
) {
  return (
    <Dialog.Root
      data-slot="alert-dialog"
      role="alertdialog"
      closeOnInteractOutside={false}
      {...props}
    />
  );
}

function AlertDialogTrigger(
  props: ComponentProps<typeof Dialog.Trigger>
) {
  return (
    <Dialog.Trigger
      data-slot="alert-dialog-trigger"
      asChild
      {...props}
    />
  );
}

function AlertDialogBackdrop({
  className,
  ...props
}: ComponentProps<typeof Dialog.Backdrop>) {
  return (
    <Dialog.Backdrop
      data-slot="alert-dialog-overlay"
      className={cn(
        "fixed inset-0 z-50 bg-black/50",
        "data-[state=open]:animate-in data-[state=open]:fade-in-0",
        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-200",
        className
      )}
      {...props}
    />
  );
}

function AlertDialogContent({
  className,
  children,
  ...props
}: ComponentProps<typeof Dialog.Content>) {
  return (
    <>
      <AlertDialogBackdrop />
      <Dialog.Positioner
        data-slot="alert-dialog-positioner"
        className="fixed inset-0 z-50 flex items-center justify-center p-4"
      >
        <Dialog.Content
          data-slot="alert-dialog-content"
          className={cn(
            "bg-background grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg",
            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:duration-200",
            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-200",
            className
          )}
          {...props}
        >
          {children}
        </Dialog.Content>
      </Dialog.Positioner>
    </>
  );
}

function AlertDialogHeader({
  className,
  ...props
}: ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-dialog-header"
      className={cn(
        "flex flex-col gap-2 text-center sm:text-left",
        className
      )}
      {...props}
    />
  );
}

function AlertDialogFooter({
  className,
  ...props
}: ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-dialog-footer"
      className={cn(
        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
        className
      )}
      {...props}
    />
  );
}

function AlertDialogTitle({
  className,
  ...props
}: ComponentProps<typeof Dialog.Title>) {
  return (
    <Dialog.Title
      data-slot="alert-dialog-title"
      className={cn("text-lg font-semibold", className)}
      {...props}
    />
  );
}

function AlertDialogDescription({
  className,
  ...props
}: ComponentProps<typeof Dialog.Description>) {
  return (
    <Dialog.Description
      data-slot="alert-dialog-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  );
}

function AlertDialogAction({
  className,
  ...props
}: ComponentProps<typeof Dialog.CloseTrigger>) {
  return (
    <Dialog.CloseTrigger
      className={cn(buttonVariants(), className)}
      {...props}
    />
  );
}

function AlertDialogCancel({
  className,
  ...props
}: ComponentProps<typeof Dialog.CloseTrigger>) {
  return (
    <Dialog.CloseTrigger
      className={cn(buttonVariants({ variant: "outline" }), className)}
      {...props}
    />
  );
}

/**
 * Unstyled close trigger for custom close buttons (e.g. X icon in header).
 * Style with buttonVariants({ variant: "outline", size: "icon" }) as needed.
 */
function AlertDialogCloseTrigger({
  className,
  ...props
}: ComponentProps<typeof Dialog.CloseTrigger>) {
  return (
    <Dialog.CloseTrigger
      data-slot="alert-dialog-close-trigger"
      className={className}
      {...props}
    />
  );
}

export {
  AlertDialogRoot as AlertDialog,
  AlertDialogTrigger,
  AlertDialogBackdrop,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogCloseTrigger,
};
3

Finally, Choose any example you like and add it to your project.
For instance, create a new file at components/shared/{example-component-name}.tsx, paste the example code into that file, and then import and use the component wherever you need it in your application.

The Alert Dialog uses Ark UI's Dialog with role="alertdialog" and closeOnInteractOutside={false} for alert semantics. It is styled with Tailwind CSS and Ocean UI design tokens.

Examples

With Icon

Destructive

With Header

With Close Button

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Button

A versatile button component for triggering actions and navigating interfaces.

On this page

Alert DialogExampleHow to install and useExamplesWith IconDestructiveWith HeaderWith Close Button