UniFECAF DS — Components Base

Botões

Hierarquia clara: Primary → Secondary → Ghost. Danger e CTA em contextos específicos.

Variantes

primary

secondary

ghost

success

danger

cta marketing ★

Regra: btn-primary = ação principal da página (apenas 1 por tela) · btn-secondary = ação alternativa · btn-ghost = navegação/cancelar (nunca vermelho para voltar) · btn-danger = só ação destrutiva irreversível · btn-cta = exclusivo para marketing/banners

Tamanhos

xs · 5/14px

sm · 7/18px

md · 10/24px

lg · 13/32px

Estados

normal

loading

disabled

secondary loading

secondary disabled

Com Ícone & Icon-only

icon left

icon right

icon-only + tooltip

ghost icon-only

Em fundos escuros

primary

white

ghost-on-dark

Badges & Tags

Badges comunicam status e categoria. Tags são removíveis pelo usuário.

Semântico — fundo claro (para fundos brancos)

Primaryprimary

Concluídosuccess

Pendentewarning

Bloqueadodanger

ℹ Infoinfo

Neutroneutral

Plataformas — para cards de vagas e eventos

Estágioestagio

Presencialpresencial

EADead

Integralintegral

Palestrapalestra

Onlineonline

Solid — para fundos escuros (cards navy, heroes)

EADsolid-green

Portalsolid-navy

EXIGIDOsolid-pink

PRESENCIALsolid-yellow

OPCIONALsolid-teal

Conquistassolid-purple

Tamanhos

Smallsm · 10px

Defaultdefault · 12px

Largelg · 14px

Tags removíveis

Todos São Paulo Estágio Presencial

Uso: filtros ativos em páginas de busca (Vagas, Eventos). Tag ativa usa tag-active.

Inputs

Sempre outline com border-radius-lg. Nunca underline. Labels acima, sempre.

Estados do Input

CPF *

Usuário * ✓ thiago_lopez está disponível

RG * ⚠ Campo obrigatório

Nome completo (opcional)

Proibido: estilo underline (Estágios atual). Todos os inputs com borda completa --radius-lg. Focus: border 2px --color-navy-600 + ring azul. Error: border 2px red + ring vermelho.

Com ícones

CPF

Senha

Select & Textarea

Curso *

Descrição da vaga Mínimo 50 caracteres

Grid de formulário (2 colunas)

Nome *

Sobrenome *

Email *

Telefone

Checkboxes & Radios

Controles de seleção nativos estilizados. Navy quando selecionado.

Checkbox

Inteligência Artificial É obrigatório para concluir o curso

Metodologias Ágeis

Soft Skills (bloqueado)

Radio

Estágio Obrigatório Exigência do seu curso

Estágio Não Obrigatório Opcional / extracurricular

Toggles

Para preferências e configurações binárias.

Receber notificações por email

Perfil público no Conquistas

Toggle pequeno

Avatars

Representação do usuário. Suporta imagem, iniciais e status.

Tamanhos com iniciais

T

xs · 24px

TL

sm · 32px

TL

md · 40px

TL

lg · 56px

TL

xl · 80px

Com status e ring

TL

online

MA

away

PB

offline

Grupo de avatars

TL

MA

PB

RC

+8

Search Bar

Barra de busca global. Usada em Vagas e Eventos.

Progress Bars

Progresso de semestre, conclusão de documentos, etapas de formulário.

2º Semestre — Graduação 68%

Documentos entregues 1/2

Formulário de estágio Etapa 1/3

Horas complementares 80/200h

Chips / Filtros

Filtros de navegação rápida. Usados em Vagas e Eventos.

✓ Todos 🏢 Presencial 💻 Remoto 📋 Estágio ⏰ Integral 🌆 São Paulo 📚 Palestra

Uso: filtros clicáveis em listagens. Chip ativo usa chip.active. Diferente de Tag — chips não são removíveis.

Stat Cards

Cards de métricas. Usados em Pesquisas, Relatórios e dashboard do One.

Disponíveis

4

↑ 2 novas hoje

Em andamento

1

Sem alteração

Pendentes

2

↓ Prazo em 3 dias

Concluídas

12

↑ +3 este mês

Skeleton Loading

Placeholder animado durante carregamento. Substitui spinners em conteúdo estruturado.

Misc

Dividers, links, tooltips e kbd.

Dividers

Conteúdo acima

Conteúdo abaixo

ou entre com

Conteúdo abaixo

Links

Esqueceu a senha? Clique aqui para recuperar. Ainda não é nosso aluno? Encontre um polo perto de você.

Tooltips

Keyboard shortcuts

Pressione ⌘ + K para abrir a busca rápida. Use Tab para navegar entre campos.