EmptyState

O EmptyState (do HeroUI Pro) ocupa o lugar de uma lista, tabela ou painel vazio. Ele diz por que está vazio e oferece o próximo passo. Não use para carregamento (Skeleton) nem para erro (Alert).

import { EmptyState } from "@rastreio-x/ui";

Padrão

Mídia com ícone, título, descrição e ações. O título nomeia o que falta; a descrição explica como preencher.

Mínimo

Sem mídia nem ações, para vazios que se resolvem sozinhos, como uma janela de tempo sem eventos.

Tamanhos

size ajusta espaçamento: sm para painéis estreitos, md (padrão) e lg para a tela inteira.

Vazio por busca

Quando a lista está vazia por causa de um filtro, cite o termo e ofereça limpar a busca.

Anatomia

• EmptyState.Media: contêiner do ícone (variant="icon" dá fundo circular).
• EmptyState.Header, EmptyState.Title, EmptyState.Description: texto.
• EmptyState.Content: área das ações.

Propriedades

Raiz (EmptyState):

Mídia (EmptyState.Media):

Animações

Estático. Se o vazio aparecer depois de uma ação (por exemplo, limpar uma lista), a troca é imediata; respeite prefers-reduced-motion se animar a entrada.

Acessibilidade

• O título é um h3: ajuste a hierarquia da página para não pular níveis.
• O ícone é decorativo (aria-hidden); o significado vem do texto.
• As ações são botões ou links normais, com rótulo de verbo.
• Quando o vazio surge depois de uma busca, anuncie o resultado numa região viva.

Boas práticas

• Uma ação principal; no máximo uma secundária.
• Texto curto, sem culpar a pessoa.
• Use o ícone do domínio (Pedido, busca), em uma variante só.
• Em tabelas, passe o vazio por renderEmptyState do DataGrid.

Relacionados

• DataGrid que mostra o vazio sem linhas.
• Skeleton para o estado de carregamento.
• Button para a ação do vazio.