Modal vs. Popover
Um modal para a página até a tarefa acabar. Um popover fica do lado do botão e deixa a página continuar funcionando.
Use um modal para uma tarefa que deve ser concluída primeiro. Use um popover para detalhes extras ou uma pequena ação.
Veja o que cada padrão faz
Experimente cada exemplo. Depois leia sobre o trabalho para o qual ele foi feito.
Diálogo Modal
Uma janela modal é uma tela focada. Ela bloqueia a tela atual até alguém fechar ou terminar o que estava fazendo.
Para exclusão de conta, o foco do teclado permanece dentro do diálogo. Se a pessoa cancelar, o foco retorna ao botão que o abriu.
- Use-o quando
- Use-o para uma escolha curta ou pequena tarefa que precise de atenção total.
- Não o use quando
- Nunca abra um diálogo sobre outro ou use um para informações normais e de baixo risco.
- Nome usado no código
<dialog> / role="dialog" aria-modal="true"
Popover
Um popover é um pequeno painel ligado ao controle que o abriu. Ele pode ter conteúdo organizado e ações sem bloquear a página.
popover attribute / PopoverSelecione um avatar para abrir um pequeno perfil. Mostra o cargo da pessoa, detalhes de contato e uma ação Seguir.
- Use-o quando
- Use-o quando o conteúdo pertence ao lado do seu gatilho e as pessoas podem continuar usando a página.
- Não o use quando
- Nunca use para uma dica curta apenas com rótulo. Use um tooltip em vez disso.
- Nome usado no código
popover attribute / Popover
Comparação rápida
| Padrão de UI | Melhor para | Não para | Nome usado no código |
|---|---|---|---|
| Diálogo ModalModal Dialog | Use-o para uma escolha curta ou pequena tarefa que precise de atenção total. | Nunca abra um diálogo sobre outro ou use um para informações normais e de baixo risco. | <dialog> / role="dialog" aria-modal="true" |
| PopoverPopover | Use-o quando o conteúdo pertence ao lado do seu gatilho e as pessoas podem continuar usando a página. | Nunca use para uma dica curta apenas com rótulo. Use um tooltip em vez disso. | popover attribute / Popover |
Antes de lançar
- 01
Anote o que a pessoa precisa fazer.
- 02
Teste o teclado, foco, toque, zoom, carregamento, estados vazio e de erro.
- 03
Certifique-se de que as pessoas podem obter as mesmas informações sem passar o mouse ou movimento.
- 04
Teste com conteúdo real em telas pequenas e grandes.
Pedido de comparação para copiar
Copie isso quando o seu time precisar de ajuda para escolher entre os padrões.
Escolha o melhor padrão de Diálogo Modal (Modal Dialog), Popover (Popover) para o nosso fluxo real de usuário. Use esta regra: Um modal para a página até a tarefa acabar. Um popover fica do lado do botão e deixa a página continuar funcionando. Anote a tarefa, a quantidade de conteúdo e o custo de parar o fluxo. Teste o comportamento de teclado, toque, carregamento, erro e movimento reduzido. Explique sua escolha e depois construa a menor versão acessível com o sistema de design do projeto.