Skip to Content
ComponentsMoleculesEmpty State

Empty State

Molecule

Empty State explica por que não há conteúdo e qual é a próxima ação segura.

Use Empty State quando uma lista, card ou seção não tem dados para mostrar. O texto deve diferenciar ausência real de dados, filtros restritivos, falta de permissão ou configuração pendente.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoEmptyStateProps = {
  eyebrow?: string
  title: string
  description: string
  primaryAction?: React.ReactNode
  secondaryAction?: React.ReactNode
}
 
export function PulsoEmptyState({
  eyebrow,
  title,
  description,
  primaryAction,
  secondaryAction,
}: PulsoEmptyStateProps) {
  return (
    <section className="grid place-items-center rounded-[var(--radius-lg)] border border-dashed border-[var(--border)] bg-[var(--card)] px-6 py-12 text-center">
      <div className="max-w-md">
        {eyebrow ? (
          <p className="font-mono text-xs font-semibold uppercase tracking-[var(--tracking-kicker)] text-[var(--fg-subtle)]">
            {eyebrow}
          </p>
        ) : null}
 
        <div aria-hidden="true" className="mx-auto mt-4 grid size-12 place-items-center rounded-full border border-[var(--border)] bg-[var(--muted)] text-[var(--fg-muted)]">
          •
        </div>
 
        <h2 className="mt-5 text-xl font-semibold text-[var(--fg)]">{title}</h2>
        <p className="mt-2 text-sm leading-6 text-[var(--fg-muted)]">{description}</p>
 
        {(primaryAction || secondaryAction) ? (
          <div className="mt-6 flex flex-wrap justify-center gap-2">
            {secondaryAction}
            {primaryAction}
          </div>
        ) : null}
      </div>
    </section>
  )
}

Exemplo de uso

<PulsoEmptyState
  eyebrow="Filtros ativos"
  title="Nenhum caso encontrado"
  description="Não há casos com risco high no período selecionado. Ajuste filtros ou amplie a janela de tempo."
  secondaryAction={
    <button className="rounded-[var(--radius-md)] border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--fg)]">
      Limpar filtros
    </button>
  }
  primaryAction={
    <button className="rounded-[var(--radius-md)] bg-[var(--primary)] px-4 py-2 text-sm font-semibold text-[var(--primary-fg)]">
      Criar monitoramento
    </button>
  }
/>

Quando usar

  • Listas sem registros reais.
  • Resultado de busca sem correspondência.
  • Dashboard sem fonte ou métrica configurada.
  • Estado inicial antes da primeira configuração.
  • Falta de permissão quando a ação segura é solicitar acesso.

Quando não usar

  • Loading: use Skeleton ou Spinner.
  • Erro de carregamento: use Alert com ação de retry.
  • Confirmação destrutiva: use Dialog/Alert Dialog.
  • Informação crítica ativa: não esconda em estado vazio.

Regras

  1. Explique a causa provável do vazio.
  2. Dê no máximo uma ação primária.
  3. Se o vazio vem de filtro, ofereça limpar ou ajustar filtro.
  4. Se o vazio vem de permissão, diga como solicitar acesso.
  5. Não use ilustração decorativa que comunique estado operacional ambíguo.
  6. Não use risco como ornamento; risco continua sendo dado operacional.
Last updated on
Delta ChipForm Field