Pular para o conteúdo
Smart UIVATSE interface system
VATSE.DEV
← Catálogocontent · stable

Empty state

Estados vazios com explicação e ação de recuperação. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Empty state quando a interface precisar de estados vazios com explicação e ação de recuperação.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

RESPONSIVO

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Ver prévias
CONTAINER · stable

Base

Estados vazios com explicação e ação de recuperação.

#
Link direto →
HTML e exemplo
<article class="sc-empty-state">Empty state</article>
Classes, JavaScript e API
sc-empty-statesc-empty-action

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Usar HTML semântico e foco visível.
  • Fornecer rótulo acessível quando não houver texto visível.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

No results

No results, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-empty-state sc-showcase-empty"><div class="sc-showcase-empty-icon" aria-hidden="true">01</div><h3>No results</h3><p>Explique o estado e ofereça um próximo passo claro para a pessoa.</p><button class="sc-btn sc-btn-primary" type="button">Continuar</button></section>
Classes, JavaScript e API
sc-empty-statesc-showcase-emptysc-showcase-empty-iconsc-btnsc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

First project

First project, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-empty-state sc-showcase-empty"><div class="sc-showcase-empty-icon" aria-hidden="true">02</div><h3>First project</h3><p>Explique o estado e ofereça um próximo passo claro para a pessoa.</p><button class="sc-btn sc-btn-primary" type="button">Continuar</button></section>
Classes, JavaScript e API
sc-empty-statesc-showcase-emptysc-showcase-empty-iconsc-btnsc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Inbox zero

Inbox zero, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-empty-state sc-showcase-empty"><div class="sc-showcase-empty-icon" aria-hidden="true">03</div><h3>Inbox zero</h3><p>Explique o estado e ofereça um próximo passo claro para a pessoa.</p><button class="sc-btn sc-btn-primary" type="button">Continuar</button></section>
Classes, JavaScript e API
sc-empty-statesc-showcase-emptysc-showcase-empty-iconsc-btnsc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Offline

Offline, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-empty-state sc-showcase-empty"><div class="sc-showcase-empty-icon" aria-hidden="true">04</div><h3>Offline</h3><p>Explique o estado e ofereça um próximo passo claro para a pessoa.</p><button class="sc-btn sc-btn-primary" type="button">Continuar</button></section>
Classes, JavaScript e API
sc-empty-statesc-showcase-emptysc-showcase-empty-iconsc-btnsc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Permission

Permission, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-empty-state sc-showcase-empty"><div class="sc-showcase-empty-icon" aria-hidden="true">05</div><h3>Permission</h3><p>Explique o estado e ofereça um próximo passo claro para a pessoa.</p><button class="sc-btn sc-btn-primary" type="button">Continuar</button></section>
Classes, JavaScript e API
sc-empty-statesc-showcase-emptysc-showcase-empty-iconsc-btnsc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Import

Import, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-empty-state sc-showcase-empty"><div class="sc-showcase-empty-icon" aria-hidden="true">06</div><h3>Import</h3><p>Explique o estado e ofereça um próximo passo claro para a pessoa.</p><button class="sc-btn sc-btn-primary" type="button">Continuar</button></section>
Classes, JavaScript e API
sc-empty-statesc-showcase-emptysc-showcase-empty-iconsc-btnsc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Search

Search, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-empty-state sc-showcase-empty"><div class="sc-showcase-empty-icon" aria-hidden="true">07</div><h3>Search</h3><p>Explique o estado e ofereça um próximo passo claro para a pessoa.</p><button class="sc-btn sc-btn-primary" type="button">Continuar</button></section>
Classes, JavaScript e API
sc-empty-statesc-showcase-emptysc-showcase-empty-iconsc-btnsc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Archived

Archived, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-empty-state sc-showcase-empty"><div class="sc-showcase-empty-icon" aria-hidden="true">08</div><h3>Archived</h3><p>Explique o estado e ofereça um próximo passo claro para a pessoa.</p><button class="sc-btn sc-btn-primary" type="button">Continuar</button></section>
Classes, JavaScript e API
sc-empty-statesc-showcase-emptysc-showcase-empty-iconsc-btnsc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Error recovery

Error recovery, composição própria do Smart UI para produtos e experiências digitais.

#
Link direto →
HTML e exemplo
<section class="sc-empty-state sc-showcase-empty"><div class="sc-showcase-empty-icon" aria-hidden="true">09</div><h3>Error recovery</h3><p>Explique o estado e ofereça um próximo passo claro para a pessoa.</p><button class="sc-btn sc-btn-primary" type="button">Continuar</button></section>
Classes, JavaScript e API
sc-empty-statesc-showcase-emptysc-showcase-empty-iconsc-btnsc-btn-primary

Não exige inicialização. Classes e atributos semânticos são suficientes.

Plugin
CSS-first
Dependências
Nenhuma
Desde
0.1.0
Acessibilidade, teclado e movimento
  • Mantém contraste de texto e foco visível.
  • Conteúdo e ações permanecem disponíveis sem animação.
  • O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Componentes relacionados

Accordion →