# Precisa ser modal?

> Todos os motivos para você não precisar de um modal, o que usar no lugar e como acertar quando ele for inevitável.

URL: https://dpw.dev/precisa-ser-modal/

**A gente usa modal demais.** Vamos parar com isso.

## Modal é a muleta de designers e devs que não sabem se expressar.

A má notícia. Existem usos bons e legítimos, mas muitos modais…

- interrompem, invadem e confundem
- viram a gaveta de tralhas da interação
- são usados demais :)
- são difíceis de fechar
- têm acessibilidade ruim
- frustram quem usa tela pequena
- bloqueiam a interação com a “janela-mãe”
- aumentam a carga cognitiva com conteúdo ou interação dispensável
- podem ser trocados facilmente por padrões menos bruscos

## Não precisa ser modal!

A boa notícia. Já pensou em usar uma destas opções?

### Dialogs não modais

Use para interações não críticas, que não bloqueiam a pessoa (como os toasts).

### Direto na página

Apresente o conteúdo inline, no fluxo da página, para interromper menos.

### Elementos expansíveis

Use elementos que se expandem, como acordeões, barras de ferramentas, tooltips ou painéis laterais deslizantes (ou outros elementos não modais).

### Página nova

Leve a pessoa para outra página e isole a interação sem tirar dela o acesso a recursos como a navegação.

### Padrões de desfazer

No lugar de um modal de confirmação, por exemplo, ofereça a opção “Desfazer” inline e agilize a interação.

## Modal do jeito certo

Quando nada mais funcionar. Se não tiver mesmo outro jeito, garanta que o seu modal seja dos bons!

### Faça: Fácil de fechar

Facilite a saída: tecla Esc, clique fora da janela do modal e um botão de fechar bem identificado.

### Faça: Um propósito só

Limite a interação a uma tarefa simples e direta.

### Faça: Curto

Seja breve e conciso no conteúdo.

### Faça: Acessível acessível acessível

Esse se explica sozinho: se não dá para deixar acessível, não use modal.

### Não faça: Modal dentro de modal

Evite abrir um modal a partir de outro modal.

### Não faça: Modal em tela cheia

Aí é melhor navegar para uma página nova.

### Não faça: Modal com várias etapas

Nunca crie um modal com várias etapas. Esse caminho leva à loucura.

### Não faça: Modal que aparece sozinho

Nunca mostre um modal que a pessoa não pediu.

### Não faça: Modal de marketing

Sério, ninguém quer essa porcaria, muito menos a sua newsletter.

Na hora de fazer, use o HTML nativo: veja [como usar e estilizar o elemento dialog](https://dpw.dev/css/usar-estilizar-dialog-html-css/).

## E nunca se esqueçam de perguntar, crianças:

> “Por que isso precisa ser um modal?”

Tradução do [dpw](https://dpw.dev/) • [Original de Adrian Egger](https://modalzmodalzmodalz.com/)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml