Empty
Estado vazio para listas, tabelas, buscas sem resultados e qualquer área sem conteúdo. Composto por header, ícone, título, descrição e ações.
Caixa de entrada vazia
Você está em dia. Novas mensagens aparecerão aqui.
Utilização
index.tsx
import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from "@convertcompany/ui";
Exemplos
Mínimo (só título)
Nenhum item por aqui
Com ação primária + secundária
Convide sua equipe
Trabalhe em conjunto convidando colegas para o workspace.
Busca sem resultados
Nenhum resultado para "automação"
Tente ajustar os filtros ou buscar por outro termo.
Erro com retry
Falha ao carregar dados
Não conseguimos buscar os contatos. O servidor pode estar indisponível.
Componentes
| Componente | Descrição |
|---|---|
Empty | Container raiz (div com layout flex-col centralizado e padding). |
EmptyHeader | Agrupa ícone, título e descrição com espaçamento adequado. |
EmptyMedia | Container do ícone/ilustração. Aceita variant="default" | "icon". |
EmptyTitle | Título do empty state. Renderiza um Title size h4. |
EmptyDescription | Descrição secundária. Renderiza um Text. |
EmptyContent | Container para ações (botões, links, inputs). |
Props do EmptyMedia
| Propriedade | Tipo |
|---|---|
| variantEstilo do container. `icon` aplica fundo `bg-muted` e tamanho fixo 40×40px. `default` é transparente, deixa o ícone solto. | default icon |
| classNameClasse CSS adicional. | string |
| childrenÍcone ou ilustração. | ReactNode |