Alert
Alertas são componentes que usualmente aparecem na parte superior da tela, e fornecem informações críticas sobre perda de dados, funcionalidades, erros, etc.
Boas práticas
- Evite apresentar mais de uma notificação por vez e/ou utilizar mensagens muito extensas.
- Utilize alertas para apresentar informações que precisam ser visualizadas imediatamente e que requerem a atenção do usuário.
- Apresente mensagens claras e que indiquem soluções ou próximos passos para o usuário.
- Evite apresentar mensagens com códigos técnicos de erro que não ajudam o usuário a resolver o problema.
- Apresente mensagens específicas para cada situação ao invés de utilizar mensagens genéricas.
- Sempre que possível assuma a responsabilidade ao invés de culpar o usuário. Exemplo: "Estamos com problemas ao conectar." ao invés de "Você está com problemas na conexão."
Tipos de alertas
| Informação | Cor azul. A notificação padrão é normalmente utilizada para dar informações de menor importância ou que não requerem ações do usuário. Geralmente não são em resposta a alguma ação do usuário. (Ex: "Você está logado com o usuário João da Silva. Deslogar.") |
|---|---|
| Perigo | Cor vermelha. Indica ao usuário que algum processo ou tarefa não pode ser completada. Mensagens de erro devem ser claras e objetivas, evitando apresentar códigos de erro técnicos. Sempre que possível apresente uma solução ou link indicando o próximo passo. (Ex.: "Não foi possível adicionar o último item. Por favor, atualize a página.") |
| Alerta | Cor laranja. São usualmente antecipações de mudanças e ajudam a prevenir erros. Comunique claramente o que vai acontecer caso o usuário prossiga com a ação e forneça uma alternativa quando possível. (Ex.: "Sua licença está prestes a expirar. Por favor, renove a licença até 05 de Agosto de 2019.") |
| Sucesso | Cor verde. Fornece um feedback positivo às ações do usuário. (Ex.: "Profissional cadastrado com sucesso.") |
Exemplos
Information message
Success message
Alert message
Error message
import { Alert, VFlow } from '@lemonade/ui'
import React from 'react'
function AlertDefault() {
return (
<VFlow>
<Alert type='info' onCloseClick={console.log}>
Information message
</Alert>
<Alert type='success' onCloseClick={console.log}>
Success message
</Alert>
<Alert type='warning' onCloseClick={console.log}>
Alert message
</Alert>
<Alert type='danger' onCloseClick={console.log}>
Error message
</Alert>
</VFlow>
)
}
export default AlertDefault