EmptyState

Tipo: Componente Angular

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-styles Storybook com classes e exemplos
Devs · Angularmds-angular Storybook com inputs e outputs

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. ![image]((hosted image))

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

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

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Exemplo

Story Default do Storybook:

<section class="mds-empty-state">
  <div class="mds-empty-state__wrap">
    <header>
      <i data-lucide="circle-alert" class="mds-icon--mds mds-icon--mds"  width="64" height="64"></i>
      <h2 class="title mds-empty-state__title">Nenhum item encontrado</h2>
    </header>
    <p>Parece que você ainda não possui registros nesta listagem.</p>
  </div>
</section>

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
`icon`	—	`inbox`
`hasActions`	`true` · `false`	`false`

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	`.mds-empty-state`
Elementos	`.mds-empty-state__icon` `.mds-empty-state__title` `.mds-empty-state__wrap`

Angular (mds-angular)

Seletor

mds-empty-state

Os Empty States são usados para exibir informações sobre qualquer tela quando não há dados a serem exibidos. Em geral, queremos tornar os estados vazios informativos e acionáveis.

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`icon`	`MdsIconAlias \| null`	`null`	Icone do Empty State
`iconType`	`'alias' \| 'svg'`	`'alias'`	Tipo do icone
`title`	`string`	`''`	Titulo principal do empty state
`text`	`string`	`''`	Texto auxiliar

Visão ao vivo

EmptyState — Figma (Design System 2.0) ↗