Vox Mente
Navegação

Componentes

Dialog

beta

Uma tarefa que o usuário escolheu fazer e pode abandonar. Se abandonar for perigoso, o componente é o Alert Dialog.

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

Playground
<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
    Editar turma
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Editar turma</DialogTitle>
      <DialogDescription>Altere o nome e a trilha vinculada a esta turma.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button>Salvar</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Uso

Dialog interrompe a tela para uma tarefa que o professor escolheu começar — e pode abandonar clicando fora ou apertando Esc.

Anatomia completa

Cabeçalho, corpo e rodapé são compostos, não props. `DialogFooter` já vem com fundo e borda próprios — não precisa simular com `className`.

Sem botão de fechar

`showCloseButton={false}` remove o X do canto. Use só quando o rodapé já resolve a saída — dois X competindo confunde.

Rodapé com fechar embutido

`showCloseButton` no `DialogFooter` adiciona um botão "Close" que já fecha o diálogo — poupa um `DialogClose` manual quando não há texto customizado para ele.

Quando não usar

Dialog fecha ao clicar fora — é para uma tarefa que se escolhe fazer e pode largar no meio. Para uma decisão sem volta, use alert-dialog: ele não fecha sozinho e força escolher entre confirmar ou cancelar.

Dialog — “Editar turma”, “Convidar professor”: tarefas que o professor pode fechar sem consequência.

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

Referência da API

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

DialogContent

PropTipoPadrão
showCloseButtonbooleantrue

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

DialogFooter

PropTipoPadrão
showCloseButtonbooleanfalse

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

Dialog, DialogClose, DialogDescription, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger 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
  • 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