Pharos
Navegar componentes
← Componentes

EmptyState

MiscExemplo
EmptyState mostra um placeholder quando uma área de conteúdo não tem dados. Use para listas vazias, zero resultados de busca, configurações iniciais ou caixas de entrada limpas. Sempre inclua um título e um próximo passo para que o usuário não fique preso.
Importação
import {EmptyState} from '@pharos-ds/core/EmptyState';

Exemplos

Área interativa

isCompact

Nenhum item encontrado

Crie um novo item para começar.
Código
import {EmptyState} from '@pharos-ds/core/EmptyState';

<EmptyState
  title="Nenhum item encontrado"
  description="Crie um novo item para começar."
  isCompact={false}
 />

Boas práticas

  • Faça: Inclua um título claro e um botão de call-to-action para que usuários saibam como prosseguir.
  • Faça: Use uma ilustração ou ícone que reforce o contexto do empty state.
  • Faça: Use a variant compact dentro de cards ou sidebars onde o espaço é limitado.
  • Evite: Deixe um empty state sem orientação; sempre explique o que aconteceu e o que o usuário pode fazer a seguir.
  • Evite: Use uma mensagem genérica como "No data"; seja específico sobre o que está vazio e por quê.
  • Evite: Use um EmptyState para mensagens de erro que exigem ação imediata; use um Banner.

Props

PropTipoPadrãoDescrição
title *string—Mensagem principal renderizada como heading <h3> dentro do empty state.
descriptionstring—Texto secundário opcional que fornece contexto adicional abaixo do título.
iconReactNode—Ícone ou ilustração opcional exibido acima do título; renderizado como decorativo (aria-hidden="true").
actionsReactNode—Botões de ação opcionais exibidos abaixo da description, dispostos horizontalmente por padrão e empilhados verticalmente quando isCompact é true.
headingLevel1 | 2 | 3 | 4 | 5 | 63Controla apenas a tag HTML de heading renderizada (h1-h6) para que o título se encaixe no outline do documento. É uma mudança semântica para acessibilidade e não altera o tamanho visual do título, que permanece fixo independentemente do level.
isCompactbooleanfalseAtiva a variant compact com espaçamento reduzido para áreas de conteúdo restritas.
xstyleStyleXStyles—Estilos StyleX para customização de layout (margens, posicionamento, dimensionamento). Deve ser um valor stylex.create(), não um objeto de estilo inline como style={{}}.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/EmptyState
EmptyState · Pharos