Ravox UIby Ravox Labs

Ravox KitSobreposição

Diálogo

Janela modal sobre o <dialog> do navegador: a página por trás fica inerte, o foco fica preso e volta para quem abriu. Fecha no Esc, no fundo e no X; cabeçalho e rodapé fixos com o corpo rolando por dentro quando o conteúdo é alto.

Ajustes

Tamanho

Exemplos

Formulário que fecha ao salvar

Controlado, aberto de fora

Estado: fechado

Conteúdo alto rolando por dentro

Travado enquanto salva

Instalação

O shadcn cria components/ui/dialogo.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.

npx shadcn@latest add https://ui.ravoxlabs.com/r/dialogo.json

Opções

OpçãoTipoPadrãoO que faz
abertoboolean—<Dialogo>: aberto ou fechado (modo controlado). Use junto com aoMudar.
padraobooleanfalse<Dialogo>: começa aberto (modo não controlado).
aoMudar(aberto: boolean) => void—<Dialogo>: chamado a cada abrir e fechar, venha do gatilho, do Esc, do fundo ou de um botão.
tamanho"pequeno" | "medio" | "grande" | "cheio""medio"<DialogoConteudo>: largura de 384, 512 ou 672px, ou quase a tela toda. No celular ocupa a largura menos 12px de cada lado.
fecharForabooleantrue<DialogoConteudo>: clique no fundo fecha. Desligado, o diálogo dá um toque de aviso no lugar.
travadobooleanfalse<DialogoConteudo>: Esc e fundo não fecham (ex.: enquanto salva).
semFecharbooleanfalse<DialogoConteudo>: esconde o X do canto.
asChildbooleanfalse<DialogoGatilho> e <DialogoFechar>: usa o seu próprio elemento no lugar do <Botao>.
data-autofocoatributo—Em qualquer elemento de dentro: recebe o foco ao abrir (o padrão é o primeiro focável).
useDialogo(){ aberto, abrir, fechar }—Hook para fechar de dentro (ex.: depois de salvar o formulário).
PeçasDialogoCabecalho · DialogoTitulo · DialogoDescricao · DialogoCorpo · DialogoRodape—O título vira o nome acessível e a descrição é lida junto. O corpo rola por dentro; as linhas do cabeçalho e do rodapé só aparecem quando há o que rolar.