Dialog

@velon-finance/ui · status: stable · organism · @radix-ui/react-dialog

Um dialog modal para interações focadas e interruptivas. Para confirmações destrutivas, use o Alert Dialog, que é intencionalmente mais difícil de dispensar.

Visão geral

Anatomia

Parte	Uso
`<DialogTrigger>`	O elemento que abre o dialog (normalmente um Button via `asChild`)
`<DialogContent>`	A moldura do modal; renderiza em um portal
`<DialogHeader>`	Título + descrição
`<DialogTitle>`	Obrigatório para compatibilidade com leitores de tela
`<DialogDescription>`	Subtítulo / contexto
`<DialogFooter>`	Linha de ações

Acessibilidade

Sempre inclua um <DialogTitle>. O Radix lança um erro se ele estiver ausente, porque os leitores de tela precisam dele.
ESC fecha o dialog; clicar fora dispensa por padrão.
O foco fica preso dentro do dialog enquanto ele está aberto e retorna para o trigger ao fechar.

Código

<Dialog>
  <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>...</DialogTitle>
      <DialogDescription>...</DialogDescription>
    </DialogHeader>
    <DialogFooter>...</DialogFooter>
  </DialogContent>
</Dialog>

Quick Action Button Dialog V2