Visão geral

O alert dialog já foi instalado em src/components/ui e funciona como modal de confirmação para ações sensíveis.

Demo básica

Import

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

Estrutura base

O componente parte de `AlertDialog`, recebe um `AlertDialogTrigger`, e monta o modal com `AlertDialogContent`, `AlertDialogHeader`, `AlertDialogTitle`, `AlertDialogDescription` e `AlertDialogFooter`.

Variações e estados

O alert dialog muda mais pela composição do conteúdo do que por variantes visuais explícitas.

Confirmação simples

Com mídia de apoio

Padrão de implementação

Resumo das classes e snippets principais para usar o alert dialog no projeto.

Content

rounded-xl bg-popover p-[30px] ring-1

Estrutura principal do modal de confirmação.

Footer

border-t bg-muted/50 px-[30px] py-[30px]

Área das ações, separada visualmente do conteúdo principal.

Trigger

AlertDialogTrigger asChild

Permite abrir o dialog a partir de um `Button` ou outro elemento interativo.

Alert dialog básico

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Abrir</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Tem certeza?</AlertDialogTitle>
      <AlertDialogDescription>
        Esta ação não poderá ser desfeita.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancelar</AlertDialogCancel>
      <AlertDialogAction>Continuar</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Alert dialog com mídia

<AlertDialogContent>
  <AlertDialogHeader>
    <AlertDialogMedia>
      <AlertTriangleIcon />
    </AlertDialogMedia>
    <AlertDialogTitle>Encerrar sessão?</AlertDialogTitle>
    <AlertDialogDescription>
      Você precisará entrar novamente depois.
    </AlertDialogDescription>
  </AlertDialogHeader>
  <AlertDialogFooter>
    <AlertDialogCancel>Voltar</AlertDialogCancel>
    <AlertDialogAction>Encerrar</AlertDialogAction>
  </AlertDialogFooter>
</AlertDialogContent>

Props e uso

Pontos principais da API instalada no projeto.

Props e peças principais

AlertDialogTrigger

slot

Elemento que abre o modal.

AlertDialogContent

container

Superfície principal do modal.

size

"default" | "sm"

Controla o tamanho máximo do content.

AlertDialogCancel / Action

ações

Botões padrão para cancelar ou confirmar a ação.

Acessibilidade

O alert dialog deve ser usado para decisões críticas, porque ele interrompe o fluxo e exige confirmação explícita.

Garanta que o título explique a ação e que a descrição deixe claro o impacto da decisão.

Os botões de ação precisam ser inequívocos: cancelar deve ser seguro e confirmar deve refletir o efeito real da ação.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter