Vox Mente
Navegação

Componentes

Alert Dialog

beta

Confirma o que não tem volta. Não fecha ao clicar fora nem no Esc — a saída é sempre uma escolha explícita.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/alert-dialog

Playground
<AlertDialog>
  <AlertDialogTrigger render={<Button variant="destructive" />}>
    Excluir turma?
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Excluir turma?</AlertDialogTitle>
      <AlertDialogDescription>Essa ação não pode ser desfeita. Os dados da turma serão apagados permanentemente.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancelar</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Excluir</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
AlertDialog
  └─ AlertDialogTrigger
  └─ AlertDialogContent
    └─ AlertDialogHeader
      └─ AlertDialogMedia
      └─ AlertDialogTitle
      └─ AlertDialogDescription
    └─ AlertDialogFooter
      └─ AlertDialogCancel
      └─ AlertDialogAction

Exportadas, mas sem demonstração nesta página: AlertDialogOverlay, AlertDialogPortal.

Uso

Alert dialog confirma o que não tem volta. Ele não fecha ao clicar fora — a única saída é escolher `AlertDialogCancel` ou `AlertDialogAction`.

Com ícone

`AlertDialogMedia` reserva um espaço de ícone à esquerda do título. Em `size="default"` o texto empurra para a direita; sem ele, tudo fica centralizado.

Tamanho compacto

`size="sm"` estreita o diálogo e faz o rodapé virar duas colunas — para uma confirmação rápida, sem espaço de leitura reservado.

Cancelar com outra variante

`AlertDialogCancel` aceita `variant` e `size` de `Button` — o padrão é `outline`, mas nada impede ajustar quando o layout pedir.

Quando não usar

Alert dialog não fecha ao clicar fora — reserve isso para o que não tem volta. Se a ação pode ser desfeita ou revisada com calma, use dialog: ele deixa o professor abandonar a tarefa sem exigir uma resposta.

Alert dialog — “Excluir turma”, “Remover aluno da trilha”: uma resposta obrigatória antes de sumir da tela.

Dialog — “Editar turma”, “Convidar professor”: fecha ao clicar fora, porque abandonar não custa nada.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

AlertDialogAction

PropTipoPadrão
size"md" | "xs" | "sm" | "lg" | "icon-md" | "icon-xs" | "icon-sm" | "icon-lg" | null—
variant"link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null—

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

AlertDialogCancel

PropTipoPadrão
size"md" | "xs" | "sm" | "lg" | "icon-md" | "icon-xs" | "icon-sm" | "icon-lg" | null"md"
variant"link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null"outline"

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

AlertDialogContent

PropTipoPadrão
size"md" | "sm""md"

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

AlertDialog, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css