Modal, drawer ou popover?
Escolha a superfície pela tarefa, pelo contexto e pelo quanto ela precisa interromper a navegação.
Antes de escolher a forma da janela, decida se a tarefa exige bloquear o restante da interface. Posição visual e comportamento são decisões diferentes: um painel lateral pode ser modal ou fazer parte do layout.
| Padrão | Quando faz sentido | Atenção |
|---|---|---|
| Janela modal | Uma decisão ou tarefa curta que precisa ser concluída ou cancelada. | Bloqueia o fundo e exige gestão de foco. |
| Painel lateral | Consultar ou editar detalhes mantendo contexto visual. | Defina se o fundo permanece interativo. |
| Painel inferior | Ações e detalhes próximos da área de toque no celular. | Gesto não pode ser o único jeito de fechar. |
| Popover | Filtros e conteúdo contextual perto do acionador. | Não costuma justificar uma interrupção global. |
Perguntas para decidir
- A pessoa precisa agir antes de continuar? Considere uma modal.
- A tarefa é longa ou precisa de link próprio? Considere uma página dedicada.
- O conteúdo depende de um botão ou item específico? Um popover pode preservar melhor essa relação.
- É preciso comparar a informação com o fundo? Evite bloqueá-lo sem necessidade.
Um exemplo
Em uma lista de projetos, um popover pode guardar filtros, um drawer pode mostrar detalhes e uma confirmação modal pode explicar uma exclusão irreversível. Não é necessário usar a mesma superfície para as três tarefas.
Verifique antes de entregar
Teste abertura e fechamento por teclado, Esc, retorno do foco, rolagem e telas pequenas. O fundo escurecido sozinho não impede cliques ou acesso por teclado.
Para aprofundar: referência oficial ↗. Os exemplos e as explicações desta página são conteúdo editorial da Biblioteca UI.
Encontrar um componente →