🪪 Guia de Uso: Documento Badge
Design System SIDASP (Fork Gales)Versão: 1.0.0 Data: 09/01/2026
📑 Índice
🎯 Visão Geral
O componente Documento Badge é utilizado para exibir números de documentos (CPF e CNPJ) em listagens e cards. Ele oferece formatação visual distinta para fácil identificação e diferenciação entre tipos de documentos.
Anatomia
<span class="documento-badge documento-badge--cpf">
<span class="documento-badge__icon">
<i class="material-icons">person</i>
</span>
<span class="documento-badge__text">123.456.789-00</span>
</span>🎨 Variantes
CPF
Utilizado para pessoas físicas. Cor azul.
<span class="documento-badge documento-badge--cpf">
<span class="documento-badge__icon"><i class="material-icons">person</i></span>
<span class="documento-badge__text">000.000.000-00</span>
</span>CNPJ
Utilizado para pessoas jurídicas. Cor roxa.
<span class="documento-badge documento-badge--cnpj">
<span class="documento-badge__icon"><i class="material-icons">business</i></span>
<span class="documento-badge__text">00.000.000/0000-00</span>
</span>Genérico
Utilizado quando o tipo de documento não é especificado ou é desconhecido. Cor cinza.
<span class="documento-badge documento-badge--generic">
<span class="documento-badge__icon"><i class="material-icons">description</i></span>
<span class="documento-badge__text">Documento 123</span>
</span>📏 Tamanhos
Padrão
O tamanho padrão é adequado para a maioria das interfaces.
Small (Pequeno)
Ideal para tabelas densas ou espaços reduzidos.
<span class="documento-badge documento-badge--cpf documento-badge--sm">...</span>Large (Grande)
Ideal para cabeçalhos ou destaques.
<span class="documento-badge documento-badge--cpf documento-badge--lg">...</span>🌓 Dark Mode
O componente possui suporte nativo ao modo escuro, ajustando automaticamente as cores de fundo, borda e texto para garantir legibilidade e contraste adequado.
♿ Acessibilidade
- Fonte Monospaced: Utiliza fontes monoespaçadas para facilitar a leitura e comparação de números.
- Ícones: Reforçam visualmente o tipo de documento.
- Alto Contraste: As cores foram escolhidas para garantir bom contraste em ambos os temas.
- Foco: Possui estilos de foco visíveis para navegação por teclado.
Mantido por: Equipe Ipeweb