Toast, alerta, banner ou callout?
Nem toda mensagem precisa interromper. Relacione duração, urgência e alcance ao componente certo.
Uma mensagem de interface precisa responder a três perguntas: o que aconteceu, qual é o impacto e o que a pessoa pode fazer. A posição e a duração devem apoiar essa resposta.
| Padrão | Duração e contexto | Exemplo |
|---|---|---|
| Toast | Breve e ligado a uma ação recente. | “Link copiado.” |
| Alerta no contexto | Perto da informação afetada; permanece enquanto necessário. | “Não foi possível verificar este endereço.” |
| Faixa de aviso | Afeta uma área ampla da experiência. | “Manutenção no domingo, das 2h às 3h.” |
| Callout | Nota de apoio ao conteúdo, sem urgência obrigatória. | “Use rótulos que descrevam a ação.” |
Urgência não é decoração
Use anúncios assertivos para problemas realmente urgentes. Atualizações rotineiras podem usar uma região de status educada. Texto vermelho e ícone de atenção não transformam uma mensagem em algo importante.
Não esconda o essencial no tempo
Se uma mensagem desaparece, a pessoa pode não vê-la. Erros que impedem uma tarefa devem continuar acessíveis perto do ponto de correção. Uma notificação com “Desfazer” precisa dar tempo suficiente e, quando necessário, outra forma de recuperação.
Cuide do foco
Uma confirmação discreta não deve roubar o foco do campo em que alguém está digitando. Só mova o foco quando a interação exigir essa mudança, e sempre mantenha uma continuação clara.
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 →