Card image

Caixa de diálogo

As caixas de diálogo exibem informações importantes que os usuários precisam reconhecer. Eles aparecem na interface e bloqueiam outras interações até que uma ação seja selecionada.

Opções

#Título
  • Todos os diálogos devem ter um título;
  • O título aparece em negrito na parte superior da caixa de diálogo e usa algumas palavras para transmitir o resultado do que acontecerá se um usuário continuar com uma ação.
#Descrição
  • As caixas de diálogo de alerta podem incluir uma descrição;
  • Uma descrição comunica brevemente qualquer informação ou contexto adicional que um usuário precisa saber para tomar uma das decisões oferecidas pelos botões.
#Variante de confirmação
  • Esta é a variante padrão para diálogos de alerta;
  • Use uma variante de confirmação para pedir a um usuário que confirme uma escolha;
  • Esta caixa de diálogo de alerta tem um botão acentuado para destacar uma forte preferência para qual ação tomar.
#Variante de informação
  • As caixas de diálogo de alerta de informações comunicam informações importantes que um usuário precisa reconhecer;
  • Antes de usar esse tipo de caixa de diálogo de alerta, verifique se é o canal de comunicação apropriado para a mensagem em vez de um alerta ou uma opção de mensagem mais leve.
#Variante de aviso
  • As caixas de diálogo de alerta de aviso comunicam informações importantes aos usuários em relação a um problema que precisa ser reconhecido, mas não impede que o usuário avance;
  • Possui um ícone de aviso laranja próximo ao título para reforçar sua importância.
#Variante destrutiva
  • As caixas de diálogo de alerta destrutivo são para quando um usuário precisa confirmar uma ação que afetará seus dados ou experiência de maneira potencialmente negativa, como excluir arquivos ou contatos;
  • Esta caixa de diálogo de alerta tem um botão vermelho (negativo) para destacar a ação destrutiva.
#Variante de erro
  • As caixas de diálogo de alerta destrutivo são para quando um usuário precisa confirmar uma ação que afetará seus dados ou experiência de maneira potencialmente negativa, como excluir arquivos ou contatos;
  • Esta caixa de diálogo de alerta tem um botão vermelho (negativo) para destacar a ação destrutiva.
#Variante com imagem
  • Esta é a variante deve ser utilizada com apoio do time de design;
  • Use uma variante com imagem quando precisar ilustrar a situação para melhor entendimento dos usuários;
  • Esta caixa de diálogo tem um botão acentuado para destacar uma forte preferência para qual ação tomar.
v1