Pular para o conteúdo principal

Modal

O Modal é usado para interromper o fluxo de trabalho, é um "container" onde outros componentes podem ser aplicados, como Form, Select, Input, etc.

Caso seja necessário que a pessoa apenas confirme alguma ação, deve ser usado o Dialog.

Título​

O título deve ser curto e ter, preferencialmente, um verbo que descreva com clareza o resultado da ação feita através do Modal.

Descrição​

Escreva descrições curtas e relevantes para o cumprimento da tarefa proposta no Modal.

Ações​

  • Relacione o verbo das ações ao título para criar uma dupla confirmação da ação de forma orgânica
  • Ofereça uma opção de “Cancelar” a ação
  • Caso precise relacionar o Modal a uma documentação externa, utilize um link na descrição

Rolagem interna​

Modais com muito conteúdo podem apresentar uma barra de rolagem na área que fica entre o título e as ações, quando o conteúdo for maior que a altura da tela do navegador, permitindo que a pessoa faça o scroll para encontrar o restante das informações.

O cabeçalho e a área destinada as ações do componente ficam sempre visíveis.

Casos de uso​

Modal Transacional​

Utilizada para obtenção de informações adicionais em um determinado fluxo ou como complemento a uma ação ou tarefa.

Modal de Onboarding​

Pode ser utilizada para apresentação ou tutoriais passo-a-passo de novas funcionalidades do produto.

Controles​

A navegação entre as etapas do Onboarding deve ser feita exclusivamente através dos botões de “Anterior” e “Próximo”, uma vez que os indicadores não são clicáveis.

Para fechar o Modal, deve-se utilizar um botão terciário com a opção “Pular”, que vai causar o fechamento do Modal.

O Modal também pode ser fechado quando a pessoa passar por todas as etapas do Onboarding.

Ilustração​

Modal de Onboarding deve conter uma ilustração por etapa. A ilustração deve estar no formato 600x200 pixels, em SVG, e recomendamos a utilização de uma cor de fundo.

Etapas​

Modais de Onboarding podem conter, no máximo, 5 etapas. Caso seu modal de Onboarding contenha apenas 1 etapa, recomendamos não exibir o indicador de etapas.

Os indicadores de etapa não são clicáveis.

Boas práticas​

Feedback​

Para reportar algum problema ou sugerir alterações, use nosso formulário de melhorias ou, se preferir, abra uma issue no nosso Github.