Gerador de badges

• Geração instantânea de badges: crie badges e componentes pill CSS na hora com nosso gerador. Ajuste texto, tamanho, cor, variante e forma em tempo real - a pré-visualização atualiza imediatamente a cada ajuste. Sem idas e voltas ao servidor, sem espera.
• Privado - sem envio a servidor: o gerador de badges roda inteiramente no seu navegador. Todas as configurações de badge, escolhas de cor e o código gerado ficam no seu dispositivo - nada é enviado a qualquer servidor.
• 12 presets de cor e cores personalizadas: escolha entre 12 presets integrados cobrindo os tipos de badge comuns: Primary, Success, Warning, Error, Info, Neutral, Sutil, Contornado, Interativo e presets de tamanho. Cada preset aplica uma configuração completa - cores, variante, tamanho e opções - ou personalize cada detalhe manualmente.
• Copie HTML + CSS com um clique: copie o snippet HTML gerado, os estilos CSS ou ambos juntos com um clique. O gerador de badges produz código pronto para produção com nomes de classe limpos, layout inline-flex adequado e estados hover/interativos completos.

• Badges de status para componentes de UI: desenvolvedores de React e Vue usam o gerador de badges para criar indicadores de status para tabelas de dados, cards de dashboard e itens de lista. Os badges gerados funcionam diretamente com frameworks de componentes - cole o CSS na sua folha de estilos e use o HTML como template de componente para status de pedido, cargos de usuário e alertas do sistema.
• Etiquetas de produto de e-commerce: lojas online usam o gerador de badges para criar etiquetas de produto como "Promoção", "Novo", "Mais vendido" e "Edição limitada". Use o preset pill interativo com as cores da sua marca para criar badges de produto que chamem atenção sem ofuscar a imagem do produto. A variante contornada funciona bem para rotulagem discreta.
• Badges de notificação de apps móveis: designers de UI móvel usam o gerador de badges para prototipar contadores de notificação, indicadores de não lido e pontos de status para interfaces de apps móveis. Os tamanhos XS e SM com forma pill produzem o visual familiar de badge de notificação que funciona em elementos de navegação de iOS e Android.
• Rótulos e tags de conteúdo de CMS: criadores de sites WordPress e CMS usam o gerador de badges para criar tags de categoria, rótulos de posts e indicadores de tipo de conteúdo. A variante sutil é perfeita para metadados de post de blog - oferece distinção visual sem o peso dos badges preenchidos, mantendo o foco no conteúdo.
• Badges de tokens de design system: mantenedores de design systems usam o gerador de badges para criar componentes de badge consistentes que usam as cores dos tokens de design. O CSS gerado usa nomes de classe e valores de cor personalizáveis que podem ser mapeados para propriedades personalizadas CSS, facilitando a tematização de badges nos modos claro e escuro.
• Tags de cargos e permissões de usuário: aplicações SaaS usam o gerador de badges para criar badges de cargo de usuário - Admin, Moderador, Editor, Assinante - com cores distintas para cada cargo. A opção de ponto indicador adiciona uma indicação visual de status, e a opção de botão de fechar permite interfaces de tag removíveis para chips de filtro e listas de seleção.

Um badge (também chamado de pill, tag, chip ou rótulo) é um pequeno elemento de interface em linha usado para rotular, categorizar ou destacar conteúdo. Os badges geralmente são compactos, têm uma cor de fundo distinta e usam cantos arredondados ou formas pill para se destacar do conteúdo ao redor. Exemplos comuns incluem contadores de notificação ("3"), indicadores de status ("Ativo", "Pendente"), rótulos de conteúdo ("Novo", "Promoção") e tags de cargo de usuário ("Admin"). Nosso gerador de badges cria HTML e CSS prontos para produção para componentes de badge que podem ser usados diretamente em qualquer projeto web.

1. Escolha um preset ou comece a personalizar: selecione entre 12 presets cobrindo tipos de badge comuns - cores de status (success, warning, error, info), variantes visuais (preenchido, contornado, sutil, fantasma), tamanhos (XS a XL) e recursos especiais (ponto indicador, botão de fechar, efeitos hover interativos). Cada preset define várias propriedades de uma vez para iteração rápida.
2. Personalize cada detalhe: ajuste o texto do badge, tamanho, variante, forma (arredondada, pill ou quadrada), cor principal e cor do texto. Ative ou desative recursos opcionais como um ponto indicador de status, um botão de fechar/remover com efeito hover, ou estados hover e clique interativos. A pré-visualização ao vivo atualiza em tempo real a cada ajuste.
3. Copie o código gerado: o gerador de badges fornece saída HTML e CSS limpa e pronta para produção. Copie o snippet HTML, os estilos CSS ou ambos juntos. O CSS inclui layout inline-flex adequado, tamanho de fonte, padding, border-radius e estados hover. Use o nome de classe personalizado para integrar ao seu design system existente.

• Preenchido: fundo sólido com texto contrastante. É a variante de badge visualmente mais proeminente. Use para ações principais, indicadores de status e contadores de notificação em que o badge precisa se destacar imediatamente do conteúdo ao redor.
• Contornado: fundo transparente com borda colorida. A cor da borda corresponde à cor principal, e o texto usa a mesma cor. Perfeito para informações secundárias em que você quer que o rótulo seja visível sem competir com o conteúdo principal.
• Sutil: fundo com tom claro e texto colorido. Usa a cor principal como tom de fundo claro (a cor informada é usada como fundo) com texto mais escuro. Ideal para tags de categoria, rótulos de metadados e badges de tokens de design system onde o badge deve ser visível, mas não dominante.
• Fantasma: sem fundo, apenas texto colorido. É a variante visualmente menos proeminente. Use para rótulos em linha, tags secundárias em interfaces densas e situações em que você quer indicar uma categoria sem adicionar peso visual.

Ao usar badges na sua interface, considere estas boas práticas de acessibilidade: garanta contraste de cor suficiente entre o fundo do badge e o texto (o WCAG AA exige proporção de 4,5:1 para texto normal); use a variante sutil com cautela, pois o fundo claro pode não oferecer contraste suficiente em todas as telas; forneça aria-labels para os botões de fechar para ajudar usuários de leitores de tela (nosso HTML gerado inclui aria-label="Remove"); evite depender apenas da cor para transmitir significado - combine badges de status com rótulos de texto para usuários com deficiências na visão de cores; e garanta que badges interativos tenham indicadores de foco visíveis para navegação por teclado.