Alert dialog

Une boîte de dialogue de confirmation pour les actions destructrices ou importantes, qui attend le travail asynchrone et devient une bottom sheet sur mobile.

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 render={<Button variant="outline" />}>
        Show dialog
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Publish changes?</AlertDialogTitle>
          <AlertDialogDescription>
            Your changes will be visible to everyone with the link.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Publish</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Installation

pnpm dlx shadcn@latest add https://hextaui.com/r/alert-dialog.json

Ajoute le composant, les tokens de thème HextaUI et les composants HextaUI dont il dépend.

Ajoutez les tokens de thème à votre CSS global, si ce n’est pas déjà fait.

Installez les dépendances.

pnpm add @base-ui/react @tabler/icons-react class-variance-authority cn

Copiez et collez le code suivant dans votre projet.

components/ui/alert-dialog.tsx

"use client"

import * as React from "react"
import { Drawer as AlertDialogPrimitive } from "@base-ui/react/drawer"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

import { Button } from "@/components/ui/button"

components/ui/sheet.tsx

"use client"

import * as React from "react"
import { Drawer as SheetPrimitive } from "@base-ui/react/drawer"
import { IconX } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

components/ui/button.tsx

"use client"

import * as React from "react"
import { Button as ButtonPrimitive } from "@base-ui/react/button"
import { IconAlertCircle, IconCircleCheck } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

Mettez à jour les chemins d’import selon la configuration de votre projet.

Utilisation

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

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    Delete
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete this project?</AlertDialogTitle>
      <AlertDialogDescription>This can’t be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Composition

AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogMedia
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction

Retournez une promesse depuis le onClick de <AlertDialogAction />. Le bouton affiche un spinner et la boîte de dialogue ne peut pas être fermée avant que la promesse soit réglée. Elle se ferme à la résolution et reste ouverte en cas de rejet, pour que l’on puisse réessayer.

"use client"

import * as React from "react"
import { IconTrash } from "@tabler/icons-react"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"

function wait(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms))
}

export function AlertDialogAsyncAction() {
  const [shouldFail, setShouldFail] = React.useState(false)
  const [attempts, setAttempts] = React.useState(0)

  return (
    <div className="flex flex-wrap items-center gap-2">
      <AlertDialog onOpenChange={(open) => open && setAttempts(0)}>
        <AlertDialogTrigger render={<Button variant="destructive" />}>
          Delete project
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogMedia variant="destructive">
              <IconTrash />
            </AlertDialogMedia>
            <AlertDialogTitle>Delete “Acme website”?</AlertDialogTitle>
            <AlertDialogDescription>
              {attempts > 0
                ? `Deleting failed ${attempts} time${attempts > 1 ? "s" : ""}. Try again.`
                : "All deployments, domains and environment variables will be removed. This can’t be undone."}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              variant="destructive"
              onClick={async () => {
                await wait(1500)
                if (shouldFail) {
                  setAttempts((count) => count + 1)
                  throw new Error("Request failed")
                }
              }}
            >
              Delete project
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
      <Button
        variant="ghost"
        size="sm"
        aria-pressed={shouldFail}
        onClick={() => setShouldFail(!shouldFail)}
      >
        Request will {shouldFail ? "fail" : "succeed"}
      </Button>
    </div>
  )
}

Média

<AlertDialogMedia /> place une icône à côté du titre sur ordinateur et au-dessus sur téléphone. Utilisez variant="destructive" pour les actions destructrices.

import { IconTrash } from "@tabler/icons-react"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"

export function AlertDialogWithMedia() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="outline" />}>
        Delete file
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogMedia variant="destructive">
            <IconTrash />
          </AlertDialogMedia>
          <AlertDialogTitle>Delete “invoice-2026.pdf”?</AlertDialogTitle>
          <AlertDialogDescription>
            The file moves to the trash and is removed after 30 days.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Petit

size="sm" centre le contenu et place les boutons côte à côte, pour les questions courtes.

import { IconLogout } from "@tabler/icons-react"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"

export function AlertDialogSmall() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="outline" />}>
        Sign out
      </AlertDialogTrigger>
      <AlertDialogContent size="sm">
        <AlertDialogHeader>
          <AlertDialogMedia>
            <IconLogout />
          </AlertDialogMedia>
          <AlertDialogTitle>Sign out?</AlertDialogTitle>
          <AlertDialogDescription>
            You’ll need to sign in again on this device.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Sign out</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Déclencheurs détachés

Créez un handle avec createAlertDialogHandle() pour partager une même boîte de dialogue entre plusieurs déclencheurs. Chaque déclencheur transmet son propre payload, que la boîte lit via une fonction de rendu.

"use client"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  createAlertDialogHandle,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"

const removeMember = createAlertDialogHandle<{ name: string }>()

export function AlertDialogDetachedTriggers() {
  return (
    <div className="flex flex-wrap gap-2">
      {["Olivia", "Liam"].map((name) => (
        <AlertDialogTrigger
          key={name}
          handle={removeMember}
          payload={{ name }}
          render={<Button variant="outline" />}
        >
          Remove {name}
        </AlertDialogTrigger>
      ))}
      <AlertDialog handle={removeMember}>
        {({ payload }) => (
          <AlertDialogContent size="sm">
            <AlertDialogHeader>
              <AlertDialogTitle>Remove {payload?.name}?</AlertDialogTitle>
              <AlertDialogDescription>
                They’ll lose access to this workspace.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>Cancel</AlertDialogCancel>
              <AlertDialogAction variant="destructive">
                Remove
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        )}
      </AlertDialog>
    </div>
  )
}

Contrôlé

Passez open et onOpenChange pour l’ouvrir depuis le code, sans déclencheur. Le focus arrive toujours sur Cancel.

"use client"

import * as React from "react"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"

export function AlertDialogControlled() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <Button
        variant="outline"
        onClick={() => window.setTimeout(() => setOpen(true), 600)}
      >
        Open in 600ms
      </Button>
      <AlertDialog open={open} onOpenChange={setOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Session expiring</AlertDialogTitle>
            <AlertDialogDescription>
              You’ve been inactive for a while. Stay signed in?
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Sign out</AlertDialogCancel>
            <AlertDialogAction>Stay signed in</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}

Imbriqué

Une boîte de dialogue ouverte depuis une autre s’empile par-dessus. La parente se réduit tant que l’enfant est ouvert et revient au premier plan à sa fermeture.

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

export function AlertDialogNested() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="outline" />}>
        Reset settings
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Reset all settings?</AlertDialogTitle>
          <AlertDialogDescription>
            Theme, notifications and shortcuts go back to their defaults.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialog>
            <AlertDialogTrigger render={<Button variant="destructive" />}>
              Reset
            </AlertDialogTrigger>
            <AlertDialogContent size="sm">
              <AlertDialogHeader>
                <AlertDialogTitle>Are you really sure?</AlertDialogTitle>
                <AlertDialogDescription>
                  The parent dialog steps back while this one is open.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Go back</AlertDialogCancel>
                <AlertDialogAction variant="destructive">
                  Reset
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Contenu long

Un contenu plus haut que l’écran défile à l’intérieur de la boîte de dialogue pendant que la page reste verrouillée.

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

const sections = Array.from({ length: 12 }, (_, index) => index + 1)

export function AlertDialogLongContent() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="outline" />}>
        Review terms
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Accept the updated terms?</AlertDialogTitle>
          <AlertDialogDescription render={<div />}>
            {sections.map((section) => (
              <p key={section}>
                Section {section}. We may update these terms from time to time.
                Continued use of the service after changes take effect means you
                accept the new terms. Read the <a href="#">full policy</a> for
                details.
              </p>
            ))}
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Decline</AlertDialogCancel>
          <AlertDialogAction>Accept</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

De droite à gauche

Passez aussi dir au contenu, car il s’affiche dans un portail en dehors de votre conteneur RTL. Les flèches du pied de page suivent le sens de lecture.

import { IconTrash } from "@tabler/icons-react"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"

export function AlertDialogRtl() {
  return (
    <div dir="rtl">
      <AlertDialog>
        <AlertDialogTrigger render={<Button variant="outline" />}>
          حذف الملف
        </AlertDialogTrigger>
        <AlertDialogContent dir="rtl">
          <AlertDialogHeader>
            <AlertDialogMedia variant="destructive">
              <IconTrash />
            </AlertDialogMedia>
            <AlertDialogTitle>حذف هذا الملف؟</AlertDialogTitle>
            <AlertDialogDescription>
              لا يمكن التراجع عن هذا الإجراء.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>إلغاء</AlertDialogCancel>
            <AlertDialogAction variant="destructive">حذف</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}

Clavier

Touche	Action
`EnterSpace`	Sur le déclencheur, ouvre la boîte de dialogue et place le focus sur Cancel.
`TabShift+Tab`	Déplace le focus entre les contrôles. Le focus reste à l’intérieur.
`←→↑↓`	Passe d’un bouton du pied de page à l’autre en bouclant. Gauche et droite suivent le sens de lecture.
`Esc`	Ferme la boîte de dialogue et rend le focus au déclencheur. Ignoré pendant l’exécution d’une action asynchrone.

Accessibilité

Le contenu a role="alertdialog", est étiqueté par son titre et décrit par sa description.
Le focus démarre sur <AlertDialogCancel />, le choix le moins destructeur. Passez initialFocus pour le modifier.
Un clic sur l’arrière-plan ne la ferme pas : une décision n’est donc jamais écartée par accident. Définissez disablePointerDismissal={false} pour l’autoriser.
Sur téléphone, elle devient une bottom sheet qu’on peut balayer vers le bas pour annuler. Pendant qu’une action est en cours, le balayage, Esc et Cancel sont bloqués et les boutons restent focusables.
Avec la réduction des animations, elle apparaît en fondu au lieu de changer d’échelle.

Référence de l’API

Construit sur le drawer de Base UI, via <Sheet />. Chaque partie accepte les props de la primitive ou de l’élément qu’elle enveloppe.

AlertDialog

Prop	Type	Par défaut
`open`	`boolean`	`–`
`defaultOpen`	`boolean`	`false`
`onOpenChange`Non appelé pour les fermetures bloquées par une action en cours.	`(open: boolean, details) => void`	`–`
`onOpenChangeComplete`Appelé après l’animation d’ouverture ou de fermeture.	`(open: boolean) => void`	`–`
`disablePointerDismissal`Garde la boîte de dialogue ouverte lors d’un clic sur l’arrière-plan.	`boolean`	`true`
`handle`Relie des déclencheurs détachés.	`AlertDialogHandle<Payload>`	`–`
`actionsRef`Ferme ou démonte la boîte de dialogue de façon impérative.	`RefObject<{ close, unmount }>`	`–`
`children`	`ReactNode \| ({ payload }) => ReactNode`	`–`

AlertDialogTrigger

Prop	Type	Par défaut
`handle`	`AlertDialogHandle<Payload>`	`–`
`payload`Transmis à la fonction de rendu de la boîte de dialogue.	`Payload`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

Attribut	Description
`data-slot="alert-dialog-trigger"`	Ciblez les déclencheurs en CSS.
`data-popup-open`	Présent tant que sa boîte de dialogue est ouverte.

AlertDialogContent

Prop	Type	Par défaut
`size`	`"default" \| "sm"`	`"default"`
`initialFocus`	`boolean \| RefObject \| (openType) => HTMLElement \| boolean`	`Cancel button`
`finalFocus`	`boolean \| RefObject \| (closeType) => HTMLElement \| boolean`	`The trigger`
`dir`À définir lorsque la boîte de dialogue doit être de droite à gauche.	`"ltr" \| "rtl"`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Attribut	Description
`data-slot="alert-dialog-content"`	Ciblez la boîte de dialogue en CSS.
`data-size`	La taille actuelle.
`data-open`	Présent tant que l’élément est ouvert.
`data-starting-style`	Présent pendant l’animation d’ouverture de la boîte de dialogue.
`data-ending-style`	Présent pendant l’animation de fermeture de la boîte de dialogue.
`data-nested-drawer-open`	Présent tant qu’une boîte de dialogue imbriquée est ouverte par-dessus.
`data-swiping`	Présent pendant qu’on la balaie sur téléphone.
`--nested-drawers`	Nombre de boîtes de dialogue ouvertes par-dessus celle-ci.

AlertDialogHeader

Un <div> qui empile le média, le titre et la description.

Attribut	Description
`data-slot="alert-dialog-header"`	Ciblez l’en-tête en CSS.

AlertDialogMedia

Prop	Type	Par défaut
`variant`	`"default" \| "destructive"`	`"default"`

Attribut	Description
`data-slot="alert-dialog-media"`	Ciblez le média en CSS.

AlertDialogTitle

Prop	Type	Par défaut
`render`	`ReactElement \| (props, state) => ReactElement`	`<h2>`

Attribut	Description
`data-slot="alert-dialog-title"`	Ciblez le titre en CSS.

AlertDialogDescription

Prop	Type	Par défaut
`render`Utilisez render={<div />} lorsqu’il contient plusieurs paragraphes.	`ReactElement \| (props, state) => ReactElement`	`<p>`

Attribut	Description
`data-slot="alert-dialog-description"`	Ciblez la description en CSS.

AlertDialogFooter

Un <div> pour les boutons. Les boutons s’empilent sur toute la largeur sur téléphone, et les flèches permettent de passer de l’un à l’autre.

Attribut	Description
`data-slot="alert-dialog-footer"`	Ciblez le pied de page en CSS.

AlertDialogAction

Un <Button /> qui ferme la boîte de dialogue au clic. Il accepte toutes les props de Button.

Prop	Type	Par défaut
`onClick`Retournez une promesse pour afficher un spinner et garder la boîte de dialogue ouverte jusqu’à son règlement. Appelez event.preventDefault() pour la garder ouverte.	`(event) => void \| PromiseLike<unknown>`	`–`
`variant`	`ButtonVariant`	`"default"`

Attribut	Description
`data-slot="alert-dialog-action"`	Ciblez les actions en CSS.

AlertDialogCancel

Prop	Type	Par défaut
`variant`	`ButtonVariant`	`"outline"`
`size`	`ButtonSize`	`–`
`disabled`Également désactivé pendant qu’une action est en cours.	`boolean`	`–`

Attribut	Description
`data-slot="alert-dialog-cancel"`	Ciblez le bouton d’annulation en CSS. Il reçoit le focus initial.
`data-disabled`	Présent lorsque l’élément est désactivé.

AlertDialogPortal et AlertDialogOverlay

<AlertDialogContent /> affiche déjà les deux. Utilisez-les uniquement pour composer une fenêtre personnalisée.

Prop	Type	Par défaut
`keepMounted`Sur le portail, garde la boîte de dialogue dans le DOM lorsqu’elle est fermée.	`boolean`	`false`

createAlertDialogHandle

Retourne un handle qui relie des éléments <AlertDialogTrigger /> placés n’importe où dans la page à un seul <AlertDialog />. Typez le payload avec un générique : createAlertDialogHandle<{ name: string }>().

Utilisé dans les blocks

Des blocks qui s’appuient sur Alert dialog.