Vox Mente
Navegação

Componentes

Confirm Dialog

beta

Confirmação de uma ação com consequência, empacotada para a tela não remontar a mesma composição toda vez.

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/confirm-dialog

Playground
<ConfirmDialog
  title="Arquivar turma?"
  consequence='A turma sai da lista padrão e volta pelo filtro "Arquivadas". Reversível a qualquer momento.'
  confirmLabel="Arquivar"
  onConfirm={() => arquivarTurma(turmaId)}
>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    Arquivar turma?
  </AlertDialogTrigger>
</ConfirmDialog>

Uso

Confirma uma ação consequente. `consequence` é obrigatória — não um parágrafo opcional — porque o CONTEXT.md fixa que não há exclusão física por padrão: o ciclo de vida é active/inactive/archived/revoked, e quem confirma precisa saber o que muda e o que volta.

Tons

`tone` escolhe o vocabulário visual sem mudar a estrutura. `archive` e `revoke` são reversíveis e usam a ação padrão; `critical` é o que de fato não tem volta, e vira `destructive` sozinho.

Crítico, com descrição

`description` é opcional e vem antes de `consequence` — use para contexto adicional. `tone="critical"` é a única exceção real ao "sem exclusão física": reserve para o que o próprio produto trata como definitivo.

Confirm dialog versus Alert dialog

Confirm dialog é construído em cima do alert-dialog, não uma alternativa a ele. A diferença é o que ele obriga a preencher.

Alert dialog — monta título, descrição e rodapé à mão. Nada impede uma tela de confirmar arquivamento sem dizer que é reversível.

Confirm dialog — obriga `consequence` como prop e mapeia `tone` para o ícone, a cor e a variante do botão de ação. A regra de negócio vira mecânica em vez de convenção lembrada tela a tela.

Referência da API

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

ConfirmDialog

PropTipoPadrão
cancelLabelstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null"Cancelar"
childrenstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—
confirmLabelstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null"Confirmar"
consequence*

O que acontece com o registro, e o que é reversível. Obrigatório.

string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—
descriptionstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—
disabledbooleanfalse
onConfirm(() => void)—
onOpenChange((open: boolean) => void)—
openboolean—
title*string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—
tone"archive" | "revoke" | "critical""archive"

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
  • 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