Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

Dialog

Diálogo — uma janela sobre a página para uma tarefa focada, como editar um perfil ou convidar pessoas. O foco entra quando ela abre, fica dentro dela e volta quando ela fecha.

Feito com Base UIPadrão WAI-ARIA Dialog (Modal)Componente clienteCódigo ↗

Instalação

Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no cliente.

import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogClose, DialogActions } from "@camaleo/react";

Anatomia

Um botão dialog-trigger abre um dialog-backdrop e este popup. Os dois renderizam num portal que mantém o estilo, o modo e a cor da página em volta do gatilho.

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Abra: o dialog usa o estilo, o modo e a cor escolhidos na barra acima.

minimal · light · #3fa34d

Projeto: Atlas

Formulário que fecha ao enviar

Clique. O foco começa no campo; enviar salva, fecha o dialog, devolve o foco ao gatilho e uma mensagem de status diz o que mudou.

Aberto por outro elemento

Quando o estado mora em outro lugar (um item de menu, um atalho), passe open e onOpenChange. O foco continua voltando para quem abriu.

Conteúdo longo

Role só o corpo, para o título e os botões ficarem à vista. Use um ScrollArea: a área recebe foco, então dá para rolar pelo teclado.

Não fecha com clique fora

Quando a pessoa digita muito, um clique sem querer não deve jogar tudo fora. O disablePointerDismissal mantém o Esc e os botões funcionando.

Botão de fechar no canto

Todo dialog precisa de uma saída visível: leitor de tela em tela touch não tem Esc. Ponha o botão de ícone por último no código, para o foco começar no conteúdo.

Mais largo para uma tabela

Existe uma largura padrão. Defina inline-size no DialogContent quando uma tabela precisar de espaço; no celular ele continua cabendo na tela.

Em contexto

Um dialog guarda uma tarefa que pertence a algo na página. São pedaços inteiros de interface para copiar, no estilo que você escolheu.

Marina Costa

marina@ateliernorte.com

Designer de produto em Porto Alegre. Gosta de tipografia, mapas e café.

Editar perfilCard · Avatar · Dialog · Field

Equipe

4 membros · 8 vagas

  • Marina CostaDona
  • Bruno Takahashi
  • Carla Mendes
  • Diego Alves

Convidar pessoasCard · Avatar · Badge · Dialog · NativeSelect

Relatório de outubro

Receita, cancelamentos e cadastros de 01/10/2026 a 31/10/2026.

Exportar um relatórioCard · Dialog · RadioGroup · Switch

Boas práticas

FaçaUma tarefa, poucos campos.

A pessoa termina e volta ao que estava fazendo.

EviteUma página de configurações inteira num dialog.

Ele rola, esconde a página a que pertence e não dá para compartilhar o link. Use uma página.

FaçaUm título que diz a tarefa.

"Convidar pessoas" e "Enviar convites" dizem o que acontece, também para um leitor de tela que só lê o título.

Evite"Informação" e "OK".

O título é o nome acessível do dialog. Um título genérico não diz a ninguém onde está.

Props

PropriedadeTipoPadrãoDescrição
openboolean—Se o dialog está aberto. Use com onOpenChange para controlar o estado.
defaultOpenbooleanfalseSe o dialog começa aberto, sem controlar o estado.
modal"trap-focus" | booleantruetrue prende o foco, trava a rolagem e bloqueia cliques fora. trap-focus só prende o foco. false deixa a página livre.
onOpenChange(open, eventDetails) => void—Chamado quando o dialog abre ou fecha. eventDetails.reason diz o motivo, por exemplo escape-key ou outside-press.
disablePointerDismissalbooleanfalseImpede que um clique fora feche o dialog. O Esc e os botões continuam funcionando.

DialogTrigger, DialogTitle, DialogDescription e DialogClose recebem as props do seu elemento, mais render.

O DialogContent decide para onde vai o foco:

PropriedadeTipoPadrãoDescrição
initialFocusboolean | RefObject | (openType) => HTMLElement | boolean—O elemento que recebe o foco ao abrir. Por padrão, o primeiro elemento focável dentro do dialog.
finalFocusboolean | RefObject | (closeType) => HTMLElement | boolean—O elemento que recebe o foco ao fechar. Por padrão, o gatilho ou o elemento que estava focado antes.
Aceita também todas as props da primitiva por baixo e os atributos nativos.

Styling hooks

Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio popup.

Atributos

data-openpresente quando aberto
data-closedpresente quando fechado
data-starting-stylepresente enquanto abre
data-ending-stylepresente enquanto fecha
data-nestedpresente num dialog aberto de dentro de outro

Tokens que ele lê

Cor

--cml-border--cml-fg--cml-fg-muted--cml-focus-offset--cml-focus-ring--cml-focus-width--cml-radius-surface--cml-shadow-surface--cml-surface-padding--cml-surface-raised

Forma e tamanho

--cml-border-width--cml-gap

Tipografia e movimento

--cml-duration-base--cml-ease-standard--cml-font-display--cml-font-weight-display--cml-motion-distance--cml-motion-scale

Só deste componente

--cml-backdrop--cml-dialog-border
/* dialog em tela cheia no celular */
@media (max-width: 40rem) {
  .checkout [data-slot="dialog-popup"] {
    inline-size: 100vw;
    max-block-size: 100dvh;
    border-radius: 0;
  }
}

Acessibilidade

Enter / SpaceNo gatilho, abre o dialog. O foco vai para o primeiro campo ou botão dentro dele.
TabVai para o próximo elemento focável. O foco fica dentro do dialog: depois do último, volta ao primeiro.
Shift + TabVai para o elemento focável anterior, voltando ao último.
EscapeFecha o dialog. O foco volta para o elemento que o abriu.

Relacionados

AlertDialogPede confirmação de uma decisão que não dá para desfazer.PopoverUm painel pequeno ao lado do gatilho, sem bloquear a página.FieldRótulo, descrição e erro para os campos de dentro.
Esta página foi útil? · Editar esta página no GitHub