EmptyAction

O EmptyAction é o vazio que não deixa a pessoa parada: diz o que falta e oferece o passo seguinte. A ação é obrigatória pelo tipo. Por baixo, ele compõe o StateBlock; use o StateBlock direto para erro e para sem permissão, em que o botão é opcional.

import { EmptyAction } from "@rastreio-x/ui";

Padrão

Título que nomeia o que falta e o Button da primeira ação.

Com dica

hint é uma frase: o que vai aparecer aqui quando o passo for dado.

Ação com ícone

A action é um Button comum, então ícone, variante e tamanho valem como em qualquer botão.

Vazio por filtro

Quando o vazio vem de um filtro, o próximo passo é desfazê-lo.

No Admin

No corpo de um Widget, no lugar da tabela ou da lista.

Anatomia

EmptyAction
└── StateBlock (tom empty)
    ├── título          h2, nomeia o vazio
    ├── hint            uma frase (opcional)
    └── action          obrigatória

Propriedades

Animações

O vazio não anima: o bloco entra e sai com a região. O selo de movimento vem do arquivo action.tsx, que importa o StateBlock (esse arquivo carrega Motion), e não do vazio.

Acessibilidade

• O título é um h2: ajuste a hierarquia da tela para não pular níveis (o h1 é do PageHeader).
• O vazio é texto comum, sem role="alert": não é uma falha. Para falhas, use o StateBlock com tone="error".
• A ação é um botão com rótulo de verbo, focável como qualquer outro.
• Não dependa de ilustração ou cor: o título e a dica dizem o estado.

Boas práticas

• Título de até quatro palavras que nomeia o que falta.
• Uma frase em hint, no máximo; mais que isso vai para um InfoHint perto.
• Uma ação por vazio; o botão é o próximo passo, não um atalho de navegação.
• Vazio por filtro oferece "Limpar Filtros"; vazio de primeira vez oferece criar ou conectar.

Relacionados

• StateBlock para erro e sem permissão, e sobre o qual o vazio é montado.
• EmptyState a peça do Pro por baixo.
• Button para a ação.
• Widget que hospeda o vazio.
• ActionRow para a lista com linhas.