import {useOverlayState} from "@heroui/react";const state = useOverlayState({ defaultOpen: false, onOpenChange: (isOpen) => console.log(isOpen),});state.isOpen; // Current statestate.open(); // Open dialogstate.close(); // Close dialogstate.toggle(); // Toggle statestate.setOpen(); // Set state directly
Control the alert dialog using React's useState hook for simple state management. Perfect for basic use cases.
Status: closed
With useOverlayState()
Use the useOverlayState hook for a cleaner API with convenient methods like open(), close(), and toggle().
Status: closed
Render alert dialogs inside a custom container instead of document.body
Apply transform: translateZ(0) to the container to create a new stacking context.
isDismissable
Controls whether the alert dialog can be dismissed by clicking the overlay backdrop. Alert dialogs typically require explicit action, so this defaults to false. Set to true for less critical confirmations.
isKeyboardDismissDisabled
Controls whether the ESC key can dismiss the alert dialog. Alert dialogs typically require explicit action, so this defaults to true. When set to false, the ESC key will be enabled.
Using slot="close"
The simplest way to close a dialog. Add slot="close" to any Button component within the dialog. When clicked, it will automatically close the dialog.
Using Dialog render props
Access the close method from the Dialog's render props. This gives you full control over when and how to close the dialog, allowing you to add custom logic before closing.
"use client";import {TrashBin} from "@gravity-ui/icons";import {AlertDialog, Button} from "@heroui/react";
"use client";import {AlertDialog, Button} from "@heroui/react";export function Statuses() {
"use client";import {AlertDialog, Button, useOverlayState} from "@heroui/react";import React from "react";
"use client";import {TriangleExclamation} from "@gravity-ui/icons";import {AlertDialog, Button} from "@heroui/react";
"use client";import {AlertDialog, Button} from "@heroui/react";export function BackdropVariants() {
"use client";import {LockOpen} from "@gravity-ui/icons";import {AlertDialog, Button} from "@heroui/react";
"use client";import {AlertDialog, Button} from "@heroui/react";import {useCallback, useRef, useState} from "react";
"use client";import {AlertDialog, Button} from "@heroui/react";export function CustomStyles() {
"use client";import {CircleInfo} from "@gravity-ui/icons";import {AlertDialog, Button} from "@heroui/react";
"use client";import {AlertDialog, Button} from "@heroui/react";export function CloseMethods() {
"use client";import {AlertDialog, Button} from "@heroui/react";export function Default() {
"use client";import {ArrowUpFromLine, Sparkles} from "@gravity-ui/icons";import {AlertDialog, Button} from "@heroui/react";import React from "react";
"use client";import {AlertDialog, Button} from "@heroui/react";export function Placements() {
"use client";import {Rocket} from "@gravity-ui/icons";import {AlertDialog, Button} from "@heroui/react";
