Pular para o conteúdo principal

Dialog

O Dialog deve ser usado sempre que uma ação precisar de confirmação. Por exemplo: pode ser usada na edição de formulários, em que os dados alterados podem impactar em outros fluxos.

Use com moderação, nem todos os fluxos precisam de um Dialog de confirmação. Se for uma tarefa complexa, prefira criar uma nova tela em vez de mostrar uma caixa de diálogo.

Elementos

O Dialog é composto por:

  • Título: O título é responsável por contextualizar sobre a ação e deve estar interligado com o texto do botão. Normalmente, os títulos são feitos em forma de pergunta, que deve ser respondida pelo rótulo do botão de confirmação
  • Texto: Use um parágrafo com mais informações sobre o contexto da ação. É possível ter outros componentes, como Checkbox, Input, entre outros
  • Prevenção de erro (opcional): Para confirmação de ações críticas, pode ser usado confirmação através de Checkbox, dando mais segurança ao processo
  • Fechar: Botão para fechar a caixa de diálogo tem o mesmo resultado do botão de "Cancelar"
  • Ações: O label dos botões deve estar conectado ao texto do título do dialog

Movimento

A animação de entrada do Dialog, quando ele é chamado por algum botão ou link, é um movimento do topo para o centro da página.

A animação de saída, quando o clique acontece fora do Dialog ou no botão "Cancelar" (ou ainda no "X"), o movimento começa na posição atual e vai até o topo da página.

Tipos

Padrão

Normalmente usado para confirmar ações triviais, como por exemplo a confirmação de edição de um formulário.

Ações sensíveis

Usado para ações de excluir informações ou para ações irreversíveis. Nesses casos, é necessário uma confirmação - como Checkbox ou Input - dentro do Dialog, para garantir que a pessoa usuária está mesmo ciente das consequências da ação. O botão de confirmação nessa situação deve ser do tipo Danger.

O botão de ação primária de dialogs sensíveis só fica ativo após o clique no mecanismo de confirmação, evitando assim confirmação por engano.

Feedback