Use PageState para comunicar um estado que substitui o conteúdo principal da página. Para listas e áreas menores sem conteúdo, prefira o componente Empty.

Talvez ela tenha mudado de endereço

O link pode estar desatualizado ou a página não está mais disponível.

Estamos preparando novidades

O sistema ficará indisponível por alguns minutos. Você pode tentar novamente em instantes.

Previsão de retorno: 14:30 BRT

Outros estados

O mesmo padrão cobre erro interno, falta de conexão e acesso negado. Altere a variante, a mensagem e as ações conforme o que a pessoa pode fazer em seguida.

Erro 500

Algo não saiu como esperado

Não foi possível concluir a operação. Tente novamente em instantes.

Sem conexão

Você está offline

Verifique sua conexão e tente carregar a página novamente.

Acesso negado

Você não pode acessar esta página

Solicite acesso ao administrador ou entre com outra conta.

Instalação

bun add @adila-sh/ui

Uso

import {
  PageState,
  PageStateActions,
  PageStateContent,
  PageStateDescription,
  PageStateTitle,
} from "@adila-sh/ui";

Variantes

default: página não encontrada ou estado informativo.
muted: indisponibilidade neutra ou falta de conexão.
warning: atualização ou manutenção programada.
destructive: falha crítica ou acesso negado.

Mantenha um único PageStateTitle (h1) por página. Explique o que aconteceu e ofereça apenas ações que ajudem a pessoa a continuar. Informações decorativas em PageStateBackdrop já são ignoradas por leitores de tela.

Dependências

class-variance-authority

Page State

Página não encontrada