mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 12:55:06 +03:00
Danny Whiteandcoderabbitai[bot]
f6e8207e6d
* docs * naming * docs * mini fix * update policies component * use destructured prop * rls policies dialogs * custom domain dialogs * restart server dialog * remove ConfirmDialog (aka ConfirmModal) * docs updates * remove unrelated work * remove unrelated work * remove unrelated work * confirmation-modal demo * use indicative components * links * tiny docs updates * examples * sheets and alert dialog examples * docs and examples * docs * docs * text confirm modal * docs * docs * revert cursor rules * fixes * fix links * Update apps/design-system/registry/examples.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * rabbit * rabbit * use variants --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
120 lines
3.5 KiB
Plaintext
120 lines
3.5 KiB
Plaintext
---
|
||
title: Alert Dialog
|
||
description: A modal dialog for critical confirmations and acknowledgements that require an explicit user decision.
|
||
component: true
|
||
links:
|
||
doc: https://www.radix-ui.com/docs/primitives/components/alert-dialog
|
||
api: https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference
|
||
source:
|
||
shadcn: true
|
||
radix: true
|
||
---
|
||
|
||
Alert Dialog interrupts the user’s workflow to communicate critical information or confirm an action that cannot be taken lightly. It presents a short, focused message and requires the user to explicitly confirm or cancel before proceeding.
|
||
|
||
Use Alert Dialog for actions such as deleting data, performing irreversible changes, or acknowledging important warnings where dismissal without a decision would be unsafe.
|
||
|
||
<ComponentPreview name="alert-dialog-demo" peekCode wide />
|
||
|
||
## Installation
|
||
|
||
<Tabs defaultValue="cli">
|
||
|
||
<TabsList>
|
||
<TabsTrigger value="cli">CLI</TabsTrigger>
|
||
<TabsTrigger value="manual">Manual</TabsTrigger>
|
||
</TabsList>
|
||
<TabsContent value="cli">
|
||
|
||
```bash
|
||
npx shadcn-ui@latest add alert-dialog
|
||
```
|
||
|
||
</TabsContent>
|
||
|
||
<TabsContent value="manual">
|
||
|
||
<Steps>
|
||
|
||
<Step>Install the following dependencies:</Step>
|
||
|
||
```bash
|
||
npm install @radix-ui/react-alert-dialog
|
||
```
|
||
|
||
<Step>Copy and paste the following code into your project.</Step>
|
||
|
||
<ComponentSource name="alert-dialog" />
|
||
|
||
<Step>Update the import paths to match your project setup.</Step>
|
||
|
||
</Steps>
|
||
|
||
</TabsContent>
|
||
|
||
</Tabs>
|
||
|
||
## 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 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>
|
||
```
|
||
|
||
## Behavior
|
||
|
||
Unlike a generic [Dialog](../components/dialog), an Alert Dialog cannot be dismissed by clicking outside the modal. The user must take an explicit action by confirming, cancelling, or pressing Escape.
|
||
|
||
This enforced decision helps prevent accidental dismissal of critical warnings or destructive actions.
|
||
|
||
## Guidelines
|
||
|
||
- **Keep content concise:** AlertDialogDescription renders as a single paragraph and must not contain block-level elements such as lists, multiple paragraphs, or complex layouts.
|
||
- **Use for critical decisions only:** Reserve Alert Dialog for destructive or irreversible actions, or for warnings that require explicit acknowledgement.
|
||
- **Always provide a cancel action:** Include AlertDialogCancel so users can safely back out, in addition to supporting the Escape key.
|
||
- **Avoid rich content:** If the dialog requires detailed explanations, callouts, or form inputs, use [Confirmation Modal](../fragments/confirmation-modal) or [Dialog](../components/dialog) instead.
|
||
|
||
See [Modality](../ui-patterns/modality) for guidance on choosing the appropriate dialog pattern.
|
||
|
||
## Examples
|
||
|
||
### Close only
|
||
|
||
<ComponentPreview name="alert-dialog-close-only" />
|
||
|
||
### Warning
|
||
|
||
<ComponentPreview name="alert-dialog-warning" />
|
||
|
||
### Destructive
|
||
|
||
<ComponentPreview name="alert-dialog-destructive" />
|