Dialog

O Dialog é um componente de interface que exibe uma pequena janela sobre o conteúdo da tela para comunicar informações importantes ou solicitar uma decisão do usuário.

Figma

---

Uso

O Dialog pode ser utilizado para exibir mensagens de confirmação, avisos ou alertas antes que o usuário finalize uma ação que possa ser destrutiva, irreversível ou que o retire de um fluxo e também para oferecer controles rápidos e relevantes para o contexto atual da tela.

---

Anatomia

❖. Container

Estrutura externa que agrupa todos os elementos internos do componente. Para o container deve ser aplicado o componente de modal que padroniza a aplicação do BG e definições de elevation para estes componentes.

1. Título (Opcional)

Um texto conciso que resume o propósito do Dialog. Pode ou não conter descrição.

2. Slot (Opcional)

Área destinada a inserção de um outro componente respeitando o alinhamento central e as margens internas do componente de Dialog.

3. Actions Area

Onde os botões de ação são posicionados. Recebe até 2 componentes de button, sendo um ação primária e uma secundária. A ação principal deve ser clara e visualmente destacada.

---

Variantes

O Dialog possui 3 variantes que definem a aparência e a disposição dos botões na actions area.

Horizontal Hug

Os botões ficam em hug e são alinhados à direita. Isso otimiza o espaço e segue padrões de desktop. Indicado para telas maiores (como desktop). A largura máxima do Dialog deve ser de 500px para evitar que a caixa se estique demais.

Horizontal Fill

Indicado para diálogos em telas menores (mobile) em casos de ênfase igual em duas ações ou onde o espaço não é uma restrição. Os botões ocupam a largura total do contêiner.

Vertical Fill

Os botões ficam em Fill e posicionados verticalmente. Utilizado quando as labels dos botões são muito longas e a disposição horizontal comprometeria a legibilidade.

---

Posicionamento

Dialogs de Confirmação

• Quando o Dialog é acionado (ex: após um clique), ele deve aparecer centralizado na tela.

• Ele é tipicamente aplicado em cima de um overlay que bloqueia a interação com o conteúdo abaixo, forçando o usuário a interagir apenas com o Dialog.

Dialogs Contextuais

• Estes Dialogs não utilizam overlay.

• O posicionamento é estritamente contextual, ou seja, próximo ao elemento da interface ao qual ele se refere.

---

Comportamento

Abertura e Fechamento

Deve ter uma transição suave (ex: fade in/out com pequena escala) para indicar que é um elemento que surge sobre a interface.

Interação com o Overlay

Para Dialogs de Confirmação, o clique fora da área do contêiner (no overlay) deve, por padrão, fechar o Dialog.

Focus

Ao ser aberto, o focus do teclado deve ser movido para o botão de ação primária ou para o primeiro elemento interativo dentro do Dialog.

Scroll

O Dialog não deve rolar com o conteúdo da página e deve permanecer fixo no local em que foi aberto. Se o conteúdo do Dialog for maior que a tela, apenas o conteúdo interno deve ter scroll.

---

Use cases

Confirmation

Contextual Settings

---

Histórico de Atualizações

Figma	Gitbook	Android	iOS	Web
03/10/2025	03/10/2025	--/--/----	--/--/----	Ver na tabela

Atualizações por data

Outubro de 2025

• 03/10/20025

  • Adição do componente