Design System
Fundamentos visuais, componentes e padrões de interface usados em todas as telas do HaisFaturamento. Use esta referência antes de criar qualquer tela nova.
Padrões
Filtros e busca
Card de filtros com busca, seleção e Limpar filtros.
FilterCard (variante bar)
Exemplo real de Contratos com operadoras: busca ocupando a maior largura, filtros e Limpar filtros na mesma linha.
- Quando usar
- • Acima de toda listagem filtrável, abaixo do Page Header
- • variant="bar" nas listagens; "inline" em blocos menores
- Comportamento
- • Filtros aplicam imediatamente, sem botão de confirmar
- • Limpar filtros fica desabilitado quando nada está ativo
- • No mobile os campos recolhem atrás do botão Filtros com contador de ativos
- • Sem resultados: EmptyStateCard com ação Limpar filtros
- Acessibilidade
- • Todo campo com rótulo visível (Buscar, Status do contrato)
- • Botão de recolher com aria-expanded e aria-controls
- • Busca limpável por botão com aria-label