EmptyState

EmptyState é o bloco que aparece quando uma lista ou uma área não tem nada para mostrar. Ele tem um título, um texto opcional e um botão opcional que leva ao próximo passo.

Quando usar

Use quando a sua tela não tiver registros e a pessoa puder fazer algo a respeito. Um título curto diz o que falta; o texto explica por quê; o botão leva à ação. Não use para um erro: para isso existe ErrorState, que é anunciado como alerta.

Regras de exibição:

• Um id padrão (empty-state-title) identifica o título. Duas áreas vazias na mesma tela precisam de ids diferentes (ui/panel/states.ts:22).
• O botão é um link com o estilo de botão secundário (ui/panel/states.ts:27).
• Dentro de uma DataTable vazia, o EmptyState recebe o id da tabela com o sufixo -empty, e o paginador aparece junto quando a lista passou da última página (ui/panel/data-table.ts:123 a :126).

Onde aparece no painel

• Visão geral, quando nenhum módulo tem indicadores: «Nenhum módulo com indicadores» (panel/screens/overview.ts:54).
• Privacidade, quando o e-mail pesquisado não tem registros: «Nenhum registro com este e-mail» (panel/screens/ops/privacidade.ts:56).
• Configuração de um módulo sem ajustes: «Este módulo não tem configurações» (panel/screens/modules/configurar.ts:71).
• Moderação de comentários, sem comentários: «Nenhum comentário para moderar.» (ui/panel/comment-queue.ts:143).
• Listas de termos vazias, em ui/panel/taxonomy-list.ts:44.

Variantes e propriedades

EmptyState

Pasta: ui/panel

Variantes

Id	Variante	Tom
states-empty-light	posts	light

Propriedades

Propriedade	Tipo	Obrigatória	Descrição
title	string	Sim	—
text	string	Não	—
action	StateAction	Não	—
id	string	Não	Heading id (default `<kind>-state-title`); two states on one screen MUST pass distinct ids.

Captura

A primeira variante do catálogo, a lista de posts vazia, em 1280 px:

A mesma variante em 360 px:

Origem

• ui/panel/states.ts: EmptyState, ErrorState, StateProps e StateAction.
• ui/panel/states.gallery.ts: as variantes do catálogo.