AlertDialog
Variante do Dialog para decisões que não podem passar despercebidas. Usa role alertdialog, liga título e descrição, não fecha com clique fora e abre com o foco em Cancelar.
Ação destrutiva
Cancelar recebe o foco ao abrir, para que Enter não descarte o envelope por engano. Esc fecha como Cancelar.
Confirmação simples
Sem cor de perigo, a ação usa a cor de ação. Action e Cancel aceitam variant, color e size do Button.
<AlertDialog>
<AlertDialogTrigger asChild>
<Button color="danger" variant="outline">Cancelar envelope</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Cancelar o envelope?</AlertDialogTitle>
<AlertDialogDescription>Os links enviados deixam de funcionar.</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Manter envelope</AlertDialogCancel>
<AlertDialogAction color="danger">Cancelar envelope</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Partes
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| AlertDialog | Root | — | Estado aberto ou fechado: open, defaultOpen e onOpenChange. |
| AlertDialogTrigger | Trigger | — | Elemento que abre o alerta. Use asChild com um Button. |
| AlertDialogContent | Content | — | Painel com role alertdialog, overlay e portal. Largura max-w-modal-sm. |
| AlertDialogHeader / Footer | div | — | Agrupam o texto e as ações. O rodapé empilha as ações abaixo de 640px. |
| AlertDialogTitle | Title | — | Ligado ao painel por aria-labelledby. |
| AlertDialogDescription | Description | — | Ligada ao painel por aria-describedby. |
| AlertDialogAction | Action | color "primary" | Confirma e fecha. Aceita variant, color e size do Button, ou asChild. |
| AlertDialogCancel | Cancel | color "secondary" | Fecha sem agir e recebe o foco inicial. |
| AlertDialogPortal / Overlay | Portal / Overlay | — | Expostos para composições próprias. |