Componentes
Empty
betaDiz o que aquilo seria e oferece a primeira ação. Vazio sem saída é beco sem saída.
Ainda não é estável porque Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
@voxmente/ui/components/ui/empty
Orientação
O estado de uma lista que ainda não tem nada. Diz o que aquilo seria e oferece a primeira ação — vazio sem saída é beco sem saída.
Quando usar
- A lista está legitimamente vazia e o usuário pode criar o primeiro item.
- Uma busca ou filtro não retornou nada e é preciso oferecer o caminho de volta.
- A tela é nova para aquele usuário e precisa explicar o que vai aparecer ali.
Quando não usar
- Quando os dados ainda estão carregando — isso é Skeleton, e a diferença importa: vazio afirma, carregando não.
- Quando o usuário não tem permissão. Sem acesso não é ausência de dado: é No Permission.
- Quando houve erro na busca dos dados. Erro precisa dizer que houve erro e oferecer nova tentativa.
Playground
Nenhuma trilha nesta turma
Trilhas organizam as lições numa sequência. Crie a primeira para começar.
<Empty>
<EmptyHeader>
<EmptyMedia>
<FileDashed weight="duotone" />
</EmptyMedia>
<EmptyTitle>Nenhuma trilha nesta turma</EmptyTitle>
<EmptyDescription>Trilhas organizam as lições numa sequência. Crie a primeira para começar.</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button>Criar trilha</Button>
</EmptyContent>
</Empty>Uso
Estado vazio precisa dizer o que aquilo é e oferecer a primeira ação. Sem saída, é beco sem saída.
Nenhuma trilha nesta turma
Trilhas organizam as lições numa sequência. Crie a primeira para começar a acompanhar a evolução.
Anatomia
Cinco peças: EmptyHeader agrupa mídia, título e descrição; EmptyContent fica fora do header e carrega a ação. Nenhuma delas exige as outras — use só o que a situação pedir.
Nenhum aluno encontrado
Nenhum aluno corresponde a “silva ferreira”. Revise a grafia ou busque por matrícula.
Mídia
`EmptyMedia` tem duas variantes: `default` deixa o fundo transparente, para ilustração própria; `icon` desenha o círculo com fundo `muted` para um ícone de 16px.
variant="icon"
variant="default"
Com erro
Empty também cobre o estado de erro — não é um componente separado. Aplique tom `destructive` na mídia e no fundo, e ofereça tentar de novo em vez de expor detalhe técnico.
Não foi possível carregar a turma
O erro foi registrado. Tentar de novo costuma resolver; se persistir, avise a coordenação.
Quando não usar: sem permissão
`NoPermission` é uma especialização do Empty, não um sinônimo. Falta de acesso é fluxo normal — o vínculo do usuário não cobre aquilo — e tem tom navy próprio, nunca destructive. Use Empty só quando a coleção está mesmo vazia.
Correto: coleção vazia → Empty
Errado: usar Empty para “você não tem acesso a esta turma”. Isso é NoPermission — veja a página do componente.
Acessibilidade
O que o componente já garante, e o que continua sendo responsabilidade da tela.
- O estado vazio substitui o conteúdo da região; o texto precisa fazer sentido lido isoladamente.
- A ação principal do vazio é um botão de verdade, com nome que descreve o que vai acontecer.
- Ilustração e ícone são decorativos: mantenha fora da árvore de acessibilidade.
Em contexto de produto
Onde isto aparece numa tela real da Vox Mente, e não numa vitrine.
Aparece na comparação dos quatro estados de tela, ao lado de carregando, sem permissão e erro, na mesma casca.
Ver os estados de telaComponentes relacionados
Vizinhos que resolvem o problema parecido. Os links são resolvidos contra o registro.
Referência da API
Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.
EmptyMedia
| Prop | Tipo | Padrão |
|---|---|---|
| variant | "default" | "icon" | null | "default" |
Também aceita as props de React, incluindo className e os atributos de DOM.
Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.
Origem do dado
- Orientação, acessibilidade e relacionados: documentação
- Demonstrações e playground: componente real de @voxmente/ui
- Referência da API: TypeScript do pacote
- Cor, espaçamento e raio das demonstrações: tokens de theme.css