Empty State
Componente para exibição de estados vazios com ícone, título, descrição e ação. Substitui o genérico "Nenhum registro encontrado" por uma experiência informativa e acionável. Dark mode automático via variáveis semânticas.
Uso
Quando e como utilizar cada variante do empty state.
- Default — Para seções e containers genéricos sem dados.
- Compact — Para uso dentro de cards, tabelas e seções menores.
- Large — Para página inteira, como tela de primeiro acesso ou boas-vindas.
Exemplos
Veja abaixo os exemplos interativos do componente em diferentes contextos.
Carregando exemplo...
Anatomia
Estrutura interna do componente e seus elementos.
| Parte | Elemento | Descrição |
|---|---|---|
| Container | .empty-state | Wrapper flexbox vertical centralizado |
| Ícone | .empty-state__icon | Ícone SVG ou ilustração, cor neutra sutil |
| Título | .empty-state__title | Título descritivo, Space Grotesk 20px w600 |
| Descrição | .empty-state__description | Texto secundário, Inter 14px, max-width 400px |
| Ação | .empty-state__action | Botão CTA opcional |
Propriedades
Classes disponíveis para configurar o empty state.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.empty-state | classe | — | Container principal do estado vazio. |
.empty-state__icon | classe | — | Container do ícone ou ilustração. |
.empty-state__title | classe | — | Título descritivo do estado vazio. |
.empty-state__description | classe | — | Texto explicativo complementar. |
.empty-state__action | classe | — | Container do botão de ação (CTA). |
.empty-state--compact | classe | — | Variante compacta para uso em cards e tabelas. |
.empty-state--large | classe | — | Variante grande para página inteira. |
Código
Snippets prontos para copiar e usar no seu projeto.
Default com ação
html
<div class="empty-state">
<div class="empty-state__icon">
<svg><!-- ícone --></svg>
</div>
<h3 class="empty-state__title">Nenhum registro encontrado</h3>
<p class="empty-state__description">Ainda não há registros nesta seção.</p>
<div class="empty-state__action">
<button class="btn btn--primary btn--sm">Criar registro</button>
</div>
</div>Compact (dentro de card)
html
<div class="empty-state empty-state--compact">
<div class="empty-state__icon">
<svg><!-- ícone --></svg>
</div>
<h3 class="empty-state__title">Nenhum anexo</h3>
<p class="empty-state__description">Arraste arquivos aqui ou clique para upload.</p>
</div>Large (página inteira)
html
<div class="empty-state empty-state--large">
<div class="empty-state__icon">
<svg><!-- ícone --></svg>
</div>
<h3 class="empty-state__title">Bem-vindo ao módulo</h3>
<p class="empty-state__description">Comece criando sua primeira demanda.</p>
<div class="empty-state__action">
<button class="btn btn--primary">Começar</button>
</div>
</div>Design
Especificações visuais e tokens utilizados.
Especificações
| Propriedade | Default | Compact | Large |
|---|---|---|---|
| Padding | 48px 24px | 24px 16px | 80px 32px |
| Gap | 12px | 8px | 16px |
| Ícone | 48x48 | 32x32 | 72x72 |
| Título | 20px w600 | 16px w600 | 24px w600 |
| Descrição | 14px | 13px | 15px |
Tokens utilizados
| Elemento | Token |
|---|---|
| Ícone | --icon-base-neutral-subtle |
| Título | --text-base-neutral-default |
| Descrição | --text-base-neutral-secondary |