Alert Dialog

Installation

Utilisation

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
 
export function AlertDialogDemo() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Show Dialog</Button>
      </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>
  )
}

API Reference

AlertDialog

Contains all the parts of an alert dialog.

AlertDialogTrigger

The button that opens the alert dialog. Wraps the trigger element.

AlertDialogContent

Contains the content to be rendered when the dialog is open.

AlertDialogHeader

Contains the title and description of the alert dialog.

AlertDialogTitle

The title of the alert dialog. This part is announced by screen readers when the dialog opens.

AlertDialogDescription

The description that gives the user more information on the alert dialog.

AlertDialogFooter

Contains the action and cancel buttons.

AlertDialogAction

The button that closes the dialog and executes a destructive action.

AlertDialogCancel

The button that closes the dialog without executing the action.

Dépendances

Ce composant nécessite les dépendances suivantes :

• @radix-ui/react-alert-dialog

Notes

• Ce composant UI fait partie du système de design
• Respecte les conventions de style et d'accessibilité
• Interrompt le flux utilisateur pour des actions importantes
• Nécessite une réponse explicite de l'utilisateur
• Supporte l'échappement avec Escape et le focus trap