Biblioteca de Componentes

Componentes reutilizáveis para construir interfaces consistentes em toda a plataforma BitReport.

Botões Badges Cards Inputs Boas Práticas

Botões

Componentes de botão para interações e chamadas à ação. Disponíveis em três variantes: primária, secundária e ghost.

Primário (Grande)

Peça uma demonstração 
<a href="#" class="inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold px-8 py-4 rounded-xl text-lg transition-colors shadow-lg shadow-blue-200">
  Label
  <svg>...</svg>
</a>

Primário (Médio)

Falar connosco

Secundário

Ver funcionalidades

Ghost (Texto)

Learn more →

Desabilitado

Com Loading

Acessibilidade

  • Use elementos <button> para ações, <a> para navegação
  • Certifique-se que o texto do botão descreve claramente a ação
  • Mantenha a proporção de contraste mínima de 4.5:1 para texto
  • Use aria-busy="true" durante carregamento

Badges

Indicadores inline para status, labels e categorias.

Variedade de Status

Info
Sucesso
Aviso
Erro

Cards

Containers para agrupar conteúdo relacionado. Suportam múltiplos estilos e layouts.

Com Ícone e Hover

Visitas a loja

Planeie e execute visitas com checklists dinâmicas.

Com Imagem

Card com Imagem

Inclui uma seção de imagem que pode conter fotos ou gradientes.

Saiba mais →

Com Shadow

Card em Destaque

Esta card tem um efeito shadow subtil para se destacar.

Inputs & Formulários

Componentes para recolher e validar entrada do utilizador.

Text Input

Email Input

Textarea

Com Erro

Este campo é obrigatório

Checkbox & Radio

Selecione uma opção

Boas Práticas

Consistência

  • Use a mesma paleta de cores em toda a interface
  • Mantenha consistência em tamanhos, spacing e border-radius
  • Reutilize componentes ao invés de criar novos estilos ad-hoc

Acessibilidade

  • Sempre use labels para inputs, associados via for attribute
  • Mantenha contrastes de cor adequados (mínimo 4.5:1)
  • Use atributos ARIA quando necessário (aria-label, aria-invalid, etc)
  • Certifique-se que todos os controlos são navegáveis por teclado

Performance

  • Use classes Tailwind em vez de CSS customizado quando possível
  • Minimize o uso de JavaScript para interações simples
  • Otimize imagens e assets visuais
  • Teste componentes em conexões lentas