mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-07 14:08:47 +00:00
65 lines
1.6 KiB
Plaintext
65 lines
1.6 KiB
Plaintext
---
|
|
title: Alert Dialog
|
|
description: A modal dialog that interrupts the user with important content and expects a response.
|
|
radix:
|
|
link: https://www.radix-ui.com/docs/primitives/components/alert-dialog
|
|
api: https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference
|
|
---
|
|
|
|
<ComponentExample src="/components/examples/alert-dialog/demo.tsx">
|
|
<AlertDialogDemo />
|
|
</ComponentExample>
|
|
|
|
## Installation
|
|
|
|
1. Install the `@radix-ui/react-alert-dialog` component from radix-ui:
|
|
|
|
```bash
|
|
npm install @radix-ui/react-alert-dialog
|
|
```
|
|
|
|
2. Copy and paste the following code into your project.
|
|
|
|
<ComponentSource src="/components/ui/alert-dialog.tsx" />
|
|
|
|
<Callout>
|
|
|
|
This is the `<AlertDialog />` primitive. You can place it in a file at `components/ui/alert-dialog.tsx`.
|
|
|
|
</Callout>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from "@/components/ui/alert-dialog"
|
|
```
|
|
|
|
```tsx
|
|
<AlertDialog>
|
|
<AlertDialogTrigger>Open</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Are you sure 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>
|
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction>Continue</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
```
|