EmptyState
- Angular:
mds-empty-state - CSS/HTML (mds-styles): disponível
- Figma: ❌
- Tipo: Componente Angular
Definição Funcional
Seção intitulada “Definição Funcional”O EmptyState é utilizado para preencher telas ou seções onde não existem dados para exibição no momento. Ele deve explicar o motivo da ausência de conteúdo e oferecer um próximo passo claro, transformando uma tela vazia em uma oportunidade de ação. )
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Ilustração ou Ícone: Utilize um elemento visual centralizado que remeta ao contexto (ex: um ícone de “caixa” para falta de mercadoria).
- Título (O que está acontecendo): Identifique o estado atual de forma direta. Use Caixa de Título.
- Exemplo: Nenhuma Viagem Encontrada, Sem Anexos Disponíveis.
- Descrição (Por que e como resolver): Explique o contexto e dê uma sugestão. Use Caixa de Sentença.
- Exemplo: Não existem fretes para o filtro selecionado. Tente ajustar os parâmetros de busca.
- Botão de Ação (Call to Action): Se possível, ofereça um caminho para criar o dado. Use Caixa de Título.
- Exemplo: Novo Agendamento, Adicionar Filtro.
- Vá Direto ao Ponto: Evite mensagens de erro genéricas como “Ops, nada por aqui”. Seja técnico e útil.
**Exemplos de Escrita **
Seção intitulada “**Exemplos de Escrita **”| Contexto | Título (O quê) | Descrição (Por que) | Ação (Botão) |
|---|---|---|---|
| Kanban Vazio | Nenhum Card no Fluxo | Não há cargas nesta etapa do processo no momento. | Criar Nova Carga |
| Busca Sem Resultado | Motorista Não Encontrado | Não localizamos motoristas com o CPF informado. | Limpar Filtros |
| Notificações | Tudo em Ordem! | Você não possui alertas pendentes de leitura. | Ir para o Dashboard |
| Documentos | Nenhum Documento | O veículo ainda não possui anexos cadastrados. | Subir Arquivo |