Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

How to Import

Add this import to your component file

app/page.tsx

1import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from "@/components/lightswind/alert-dialog"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

open	boolean	-	Controls whether the dialog is open or closed	Optional
onOpenChange	(open: boolean) => void	-	Callback fired when the dialog open state changes	Optional
defaultOpen	boolean	false	Initial open state of the dialog when uncontrolled	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import {
2  AlertDialog,
3  AlertDialogTrigger,
4  AlertDialogContent,
5  AlertDialogHeader,
6  AlertDialogTitle,
7  AlertDialogDescription,
8  AlertDialogFooter,
9  AlertDialogAction,
10  AlertDialogCancel,
11} from "@/components/lightswind/alert-dialog";
12import { Button } from "@/components/lightswind/button";
13
14export function AlertDialogDemo() {
15  return (
16    <AlertDialog>
17      <AlertDialogTrigger asChild>
18        <Button variant="outline">Delete Account</Button>
19      </AlertDialogTrigger>
20      <AlertDialogContent>
21        <AlertDialogHeader>
22          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
23          <AlertDialogDescription>
24            This action cannot be undone. This will permanently delete your
25            account and remove your data from our servers.
26          </AlertDialogDescription>
27        </AlertDialogHeader>
28        <AlertDialogFooter>
29          <AlertDialogCancel>Cancel</AlertDialogCancel>
30          <AlertDialogAction>Continue</AlertDialogAction>
31        </AlertDialogFooter>
32      </AlertDialogContent>
33    </AlertDialog>
34  );
35}

Variants

Different visual and behavioral variants of the component

Default Variant

The standard alert dialog with cancel and continue actions.

Previousalert

Nextavatar

A product byＭＵＨＩＬＡＮ and Team❤️.

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

...

How to Import

Add this import to your component file

app/page.tsx

1import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from "@/components/lightswind/alert-dialog"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

open	boolean	-	Controls whether the dialog is open or closed	Optional
onOpenChange	(open: boolean) => void	-	Callback fired when the dialog open state changes	Optional
defaultOpen	boolean	false	Initial open state of the dialog when uncontrolled	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import {
2  AlertDialog,
3  AlertDialogTrigger,
4  AlertDialogContent,
5  AlertDialogHeader,
6  AlertDialogTitle,
7  AlertDialogDescription,
8  AlertDialogFooter,
9  AlertDialogAction,
10  AlertDialogCancel,
11} from "@/components/lightswind/alert-dialog";
12import { Button } from "@/components/lightswind/button";
13
14export function AlertDialogDemo() {
15  return (
16    <AlertDialog>
17      <AlertDialogTrigger asChild>
18        <Button variant="outline">Delete Account</Button>
19      </AlertDialogTrigger>
20      <AlertDialogContent>
21        <AlertDialogHeader>
22          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
23          <AlertDialogDescription>
24            This action cannot be undone. This will permanently delete your
25            account and remove your data from our servers.
26          </AlertDialogDescription>
27        </AlertDialogHeader>
28        <AlertDialogFooter>
29          <AlertDialogCancel>Cancel</AlertDialogCancel>
30          <AlertDialogAction>Continue</AlertDialogAction>
31        </AlertDialogFooter>
32      </AlertDialogContent>
33    </AlertDialog>
34  );
35}

Variants

Different visual and behavioral variants of the component

Default Variant

The standard alert dialog with cancel and continue actions.

Previousalert

Nextavatar

A product byＭＵＨＩＬＡＮ and Team❤️.

Alert Dialog

How to Import

Props

Basic Usage

Variants

Default Variant

On This Page

Contribute

Alert Dialog

How to Import

Props

Basic Usage

Variants

Default Variant

On This Page

Contribute

React Alert Dialog Component - Lightswind UI

Key Details of React Alert Dialog

Alert Dialog

How to Import

Props

Basic Usage

Variants

Default Variant

On This Page

Contribute

Alert Dialog

How to Import

Props

Basic Usage

Variants

Default Variant

On This Page

Contribute