Componentes

No Permission

beta

Sem acesso não é estado vazio. Aparece em fluxo normal, precisa dizer o que destrava, e é navy — bloqueio por política não é falha do usuário.

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/no-permission

Orientação

O estado de quem chegou numa tela que existe e não pode ver. Aparece em fluxo normal, precisa dizer o que destrava, e é navy: bloqueio por política não é falha do usuário.

Quando usar

A autorização depende de papel e de vínculo concreto, e o vínculo não existe para aquela pessoa.
O acesso pode ser concedido por alguém, e o usuário precisa saber por quem.
A tela existe e continuará existindo — não é um endereço quebrado.

Quando não usar

Para lista vazia. Ausência de dado não é ausência de permissão, e trocar um pelo outro engana o usuário.
Para erro de carregamento, que pede nova tentativa e não pede autorização.
Para esconder a existência de um recurso. Se a existência é sensível, o caminho é não expor a rota.

Playground

Você não tem acesso a este conteúdo

O acesso depende de vínculo autorizado. Fale com a coordenação da escola.

Títulodemonstração

Descriçãodemonstração

Com açãodemonstração

<NoPermission
  title="Você não tem acesso a este conteúdo"
  description="O acesso depende de vínculo autorizado. Fale com a coordenação da escola."
  action={<Button variant="outline">Solicitar acesso</Button>}
/>

"Sem acesso" não é estado vazio: no VoxMente o acesso depende de vínculo concreto (papel + escola + turma + aluno), então esta tela aparece em fluxo normal, não em erro. Veja a distinção completa em Padrões → Estados de tela.

Você não tem acesso a este conteúdo

O acesso depende de vínculo autorizado. Fale com a coordenação da escola.

Ação que destrava

`action` é parte da API, não um extra de composição. A tela precisa dizer o que resolve o bloqueio, não só que ele existe.

Você não tem acesso a este conteúdo

Você não está vinculado à turma 9º ano A. Peça à coordenação para adicionar seu vínculo.

Título e ícone personalizados

`title`, `description` e `icon` têm um padrão genérico, mas o texto fica melhor quando nomeia o vínculo que falta.

Este aluno não é da sua turma

Só professores vinculados à turma do aluno veem o histórico de sessões.

Acessibilidade

O que o componente já garante, e o que continua sendo responsabilidade da tela.

O texto precisa dizer o que fazer, não só que não pode: sem caminho, o usuário fica preso.
É estado de tela; substitui o conteúdo da região principal e precisa ser lido como conteúdo, não como aviso passageiro.
Evite depender só do tom navy para comunicar a diferença em relação a erro — o texto carrega o significado.

Em contexto de produto

Onde isto aparece numa tela real da Vox Mente, e não numa vitrine.

Aparece entre os quatro estados de tela, ao lado de vazio e erro, para deixar clara a diferença entre não ter dado e não ter acesso.

Ver os estados de tela

Componentes 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.

NoPermission

Prop	Tipo	Padrão
action	string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null	—
description	string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null	"O acesso depende de vínculo autorizado. Fale com a coordenação da escola."
icon	string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null	—
title	string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| null	"Você não tem acesso a este conteúdo"

Também aceita as props de React, 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