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.
Componentes
Ícones de ação e tooltips
Semântica dos ícones da coluna Ações, tooltips, InfoHint e texto truncado.
Ícones da coluna Ações
O ícone representa o tipo de ação, nunca o status do registro. Status é comunicado por badges.
Visualizar arquivo
Abre o documento original enviado.
Ver processamento
Mostra o que o sistema extraiu, com sucesso ou falha.
Baixar arquivo
Baixa o arquivo ou o resultado.
CircleAlert não é ação: aparece só em badges, alertas e avisos.
Tooltips, InfoHint e texto truncado
Tooltip curto para botões de ícone; InfoHint para explicar um rótulo; TruncatedText para nomes longos.
Registros vigentesbase_simpro_atualizacao_parcial_outubro_2026.csvAtual
- Quando usar
- • Tooltip em todo botão só de ícone
- • InfoHint quando o rótulo precisa de contexto extra
- • TruncatedText em nomes de arquivo, e-mails e descrições longas
- Comportamento
- • Tooltip aparece após 150 ms, sem ações dentro
- • InfoHint abre também por clique/toque
- • Texto truncado mostra o conteúdo completo no tooltip
- Acessibilidade
- • Tooltip abre por foco do teclado, não só pelo mouse
- • Ícones decorativos com aria-hidden; o rótulo fica no botão