Skip to Content
ComponentsAtomsEmpty

Empty

Atom

Empty explica ausência de conteúdo. Ele deve dizer o que aconteceu e qual próximo passo faz sentido.

Use Empty quando uma lista, busca, filtro ou seção não tem dados. Em Pulso, estado vazio não pode ser só “nada aqui”: ele precisa diferenciar ausência real, filtro restritivo, erro de fonte ou permissão.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoEmptyProps = {
  title: string
  description: string
  action?: React.ReactNode
}
 
export function PulsoEmpty({ title, description, action }: PulsoEmptyProps) {
  return (
    <section className="grid place-items-center rounded-[var(--radius-md)] border border-dashed border-[var(--border-strong)] bg-[var(--card)] px-6 py-10 text-center">
      <div className="max-w-md">
        <p className="font-mono text-[10.5px] uppercase tracking-[var(--tracking-kicker)] text-[var(--fg-subtle)]">Estado vazio</p>
        <h2 className="mt-2 text-lg font-semibold text-[var(--fg-strong)]">{title}</h2>
        <p className="mt-2 text-sm leading-6 text-[var(--fg-muted)]">{description}</p>
        {action ? <div className="mt-4">{action}</div> : null}
      </div>
    </section>
  )
}
<PulsoEmpty
  title="Nenhuma menção encontrada"
  description="Revise filtros ou amplie o período. Não há evidência nova para esta consulta."
  action={<button className="text-sm font-medium text-[var(--primary)]">Limpar filtros</button>}
/>

Quando usar

  • Lista sem itens.
  • Busca sem resultado.
  • Filtro restritivo demais.
  • Primeiro uso antes de configurar fontes.

Quando não usar

  • Para erro técnico sem diagnóstico; use Alert/Error.
  • Para carregamento; use Skeleton ou Spinner.
  • Para esconder permissão negada.
  • Para substituir onboarding quando há fluxo de setup.

Acessibilidade

  • Use título claro e descrição curta.
  • Ação deve ser botão ou link real.
  • Não dependa só de ícone decorativo.
  • Diferencie “sem dados” de “não carregou”.

Regras

  1. Diga a causa provável do vazio.
  2. Ofereça próximo passo quando existir.
  3. Não culpe o usuário.
  4. Vazio por filtro deve permitir limpar filtros.
  5. Vazio por permissão precisa explicar acesso necessário.
Last updated on
DrawerField