Alerts
Comunicação de status contextual. Sempre com borda esquerda colorida semântica.
Variantes semânticas
Informação
Se a empresa já tiver o documento assinado, preencha o formulário, anexe o arquivo no final e finalize o processo de envio.
Documento enviado com sucesso!
Seu documento foi recebido e está em análise. Você será notificado quando aprovado.
Disponível apenas para Estágios Não Obrigatórios
Estamos testando a versão Beta para Estágios Obrigatórios para garantir a melhor experiência em breve.
Há campos obrigatórios não preenchidos
Complete todos os campos marcados com * para continuar para a próxima etapa.
Envie o documento contendo frente e verso no mesmo arquivo.
Proibido: fundo amarelo full-width para erros de validação (padrão atual em Estágios). Use sempre
alert-danger com border-left. Fundo amarelo full-width = apenas banner-system.
Inline (compacto)
Gerado instantaneamente em formato PDF com assinatura digital válida.
Opção para disciplinas obrigatórias. Atualize o curso na página de cursos, se necessário.
Uso: dentro de cards e formulários onde espaço é limitado. Adicione
alert-inline junto com a variante semântica.Banners de Sistema
Full-width, fixos no topo. Para estados globais: pré-lançamento, manutenção, avisos críticos.
Regra: Banners de sistema são os únicos componentes com fundo colorido full-width. Nunca usar este padrão para validações de formulário — use
alert-danger para isso.
Toasts
Notificações temporárias. Surgem no canto inferior direito, somem em 4s. Fundo escuro sempre.
Variantes
Documento enviado!
Seu atestado de frequência foi gerado com sucesso.
Erro ao salvar
Não foi possível salvar suas alterações. Tente novamente.
Novo evento disponível
Semana da Enfermagem — 12/05 às 19h na Sede UniFECAF.
Prazo em 2 dias
Você ainda tem documentos obrigatórios pendentes.
Com barra de progresso de duração
Perfil atualizado!
Suas informações foram salvas.
Disparo: Toasts aparecem no
z-index: --z-toast (500), canto inferior direito, com position: fixed. Auto-dismiss em 4s. Máximo de 3 toasts empilhados. Mais recente embaixo.
Demonstração ao vivo
Clique nos botões para ver os toasts animados no canto inferior direito.
Modais
Anatomia padrão: header + body + footer. X circular neutro. Ações à direita no footer.
Variantes e exemplos ao vivo
Regra de X: Sempre ícone circular cinza neutro — nunca X vermelho puro (atual em alguns modais). Footer: Ghost (cancelar) + Primary (confirmar) alinhados à direita. Ação destrutiva = btn-danger.
Anatomia visual — modais lado a lado
Empty States
Borda tracejada, ícone circular, título + descrição + ação opcional. Nunca texto solto centralizado.
Nenhum badge ainda
Conquiste badges completando atividades e participando de eventos da UniFECAF.
Sem inscrições
Você ainda não se inscreveu em nenhum evento. Explore e participe!
Sem notificações
Você está em dia! Novas notificações aparecerão aqui.
Nenhuma vaga encontrada
Tente ajustar os filtros ou ampliar a busca para encontrar oportunidades.
Proibido: texto solto centralizado sem borda (ex: "Parece que você ainda não possui inscrições." em Eventos). Sempre usar
empty-state com borda tracejada. Ícone obrigatório. Botão de ação quando houver caminho claro.
Loading States
Spinners, page loader e inline loading. Nunca bloquear toda a tela sem feedback visual.
Spinners
sm · 16px
md · 24px
lg · 40px
success
Page Loader (tela de autenticação)
🔒
Autenticando
Uso: sobreposto à tela de login com
backdrop-filter: blur. Logo com animação de pulso. Nunca usar loading sem indicação textual.
Inline loading row
Carregando suas disciplinas...
Verificando disponibilidade do username...
Skeleton de card de evento
Step Indicator
Progresso em formulários multi-etapa. Usado em Estágios (formulário 1/3).
Etapa 1 de 3 — Dados do aluno
1
Dados pessoais
2
Dados da empresa
3
Revisão e envio
Etapa 2 de 3 — Dados da empresa
✓
Dados pessoais
2
Dados da empresa
3
Revisão e envio
Etapa 3 de 3 — Revisão
✓
Dados pessoais
✓
Dados da empresa
3
Revisão e envio
Uso: Substitui o indicador
1/3 em texto simples atual em Estágios. Dá ao aluno contexto visual claro de onde está no processo.
Feedback Rating
Avaliação de páginas. Presente em Pesquisas, Relatórios e Estágios.
— Conteúdo da página —
Uso: fixo no rodapé das páginas de conteúdo. Após clique, mostra mensagem de agradecimento e desabilita os botões.