Dialog
Fenetre modale construite sur Radix UI Dialog. S'affiche au centre de l'ecran avec un overlay flou en arriere-plan. Responsive avec padding adapte (p-4 mobile, p-6 desktop).
Preview
Dialog de confirmation
Variante destructive pour les actions irreversibles comme la suppression.
Props
Dialog (Root)
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Controle l'ouverture du dialog (mode controle). |
| defaultOpen | boolean | false | Etat d'ouverture par defaut (mode non-controle). |
| onOpenChange | (open: boolean) => void | — | Callback appele quand l'etat d'ouverture change. |
DialogTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Si true, rend l'enfant direct au lieu d'un <button>. Utiliser avec un Button. |
DialogContent
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Classes CSS additionnelles. Par defaut : max-w-lg, centre, ombre, bords arrondis, max-height avec scroll. |
Sous-composants
| Prop | Type | Default | Description |
|---|---|---|---|
| DialogHeader | HTMLDivElement | — | Conteneur pour DialogTitle et DialogDescription. Flex column, centre sur mobile. |
| DialogTitle | Radix DialogPrimitive.Title | — | Titre du dialog. text-lg font-semibold. |
| DialogDescription | Radix DialogPrimitive.Description | — | Description du dialog. text-sm text-muted-foreground. |
| DialogFooter | HTMLDivElement | — | Pied du dialog. Colonne inversee sur mobile, flex-row sur desktop. |
| DialogClose | Radix DialogPrimitive.Close | — | Bouton qui ferme le dialog. Le bouton X en haut a droite est inclus automatiquement. |