Générateur de badges

• Génération instantanée de badges : créez des badges et des composants pill CSS instantanément avec notre générateur. Ajustez le texte, la taille, la couleur, la variante et la forme en temps réel - l'aperçu se met à jour immédiatement à chaque réglage. Aucun aller-retour serveur, aucune attente.
• Privé - aucun envoi vers un serveur : le générateur de badges fonctionne entièrement dans votre navigateur. Toutes les configurations de badge, les choix de couleur et le code généré restent sur votre appareil - rien n'est envoyé à un serveur.
• 12 préréglages de couleur et couleurs personnalisées : choisissez parmi 12 préréglages intégrés couvrant les types de badges courants : Primary, Success, Warning, Error, Info, Neutral, Subtil, Contour, Interactif et préréglages de taille. Chaque préréglage applique une configuration complète - couleurs, variante, taille et options - ou personnalisez chaque détail manuellement.
• Copie HTML + CSS en un clic : copiez le snippet HTML généré, les styles CSS, ou les deux ensemble en un clic. Le générateur de badges produit du code prêt pour la production avec des noms de classes propres, une mise en page inline-flex correcte et des états de survol/interactifs complets.

• Badges de statut pour composants UI : les développeurs React et Vue utilisent le générateur de badges pour créer des indicateurs de statut pour les tableaux de données, les cartes de tableau de bord et les éléments de liste. Les badges générés fonctionnent directement avec les frameworks de composants - collez le CSS dans votre feuille de styles et utilisez le HTML comme modèle de composant pour les statuts de commande, les rôles utilisateur et les alertes système.
• Étiquettes produit e-commerce : les boutiques en ligne utilisent le générateur de badges pour créer des étiquettes produit comme « Promo », « Nouveau », « Meilleure vente » et « Édition limitée ». Utilisez le préréglage pill interactif avec les couleurs de votre marque pour créer des badges produit qui attirent l'attention sans écraser l'image du produit. La variante contour convient bien à un étiquetage discret.
• Badges de notification d'applications mobiles : les designers d'UI mobile utilisent le générateur de badges pour prototyper des compteurs de notifications, des indicateurs de non-lu et des points de statut pour les interfaces d'applications mobiles. Les tailles XS et SM avec la forme pill produisent l'aspect familier de badge de notification qui fonctionne sur les éléments de navigation iOS et Android.
• Étiquettes et tags de contenu CMS : les créateurs de sites WordPress et CMS utilisent le générateur de badges pour créer des tags de catégorie, des étiquettes d'articles et des indicateurs de type de contenu. La variante subtile est parfaite pour les métadonnées d'un article de blog - elle apporte une distinction visuelle sans la lourdeur des badges pleins, en gardant l'accent sur le contenu.
• Badges de tokens de design system : les responsables de design systems utilisent le générateur de badges pour créer des composants de badge cohérents utilisant les couleurs des design tokens. Le CSS généré utilise des noms de classes et des valeurs de couleur personnalisables qui peuvent être mappés à des propriétés personnalisées CSS, ce qui facilite la thématisation des badges en modes clair et sombre.
• Tags de rôles et permissions utilisateur : les applications SaaS utilisent le générateur de badges pour créer des badges de rôle utilisateur - Admin, Modérateur, Éditeur, Abonné - avec des couleurs distinctes pour chaque rôle. L'option point indicateur ajoute un indice visuel de statut, et l'option bouton de fermeture permet des interfaces de type tag supprimables pour les puces de filtre et les listes de sélection.

Un badge (aussi appelé pill, tag, chip ou libellé) est un petit élément d'interface en ligne utilisé pour étiqueter, catégoriser ou mettre en avant du contenu. Les badges sont généralement compacts, ont une couleur de fond distincte et utilisent des coins arrondis ou des formes pill pour se démarquer du contenu environnant. Les exemples courants incluent les compteurs de notifications (« 3 »), les indicateurs de statut (« Actif », « En attente »), les étiquettes de contenu (« Nouveau », « Promo ») et les tags de rôle utilisateur (« Admin »). Notre générateur de badges crée du HTML et du CSS prêts pour la production pour des composants badge utilisables directement dans tout projet web.

1. Choisissez un préréglage ou commencez à personnaliser : sélectionnez parmi 12 préréglages couvrant les types de badges courants - couleurs de statut (success, warning, error, info), variantes visuelles (plein, contour, subtil, fantôme), tailles (XS à XL) et fonctions spéciales (point indicateur, bouton de fermeture, effets de survol interactifs). Chaque préréglage définit plusieurs propriétés à la fois pour itérer rapidement.
2. Personnalisez chaque détail : ajustez le texte du badge, la taille, la variante, la forme (arrondie, pill ou carrée), la couleur principale et la couleur du texte. Activez ou désactivez des fonctions optionnelles comme un point indicateur de statut, un bouton de fermeture/suppression avec effet de survol, ou des états de survol et de clic interactifs. L'aperçu en direct se met à jour en temps réel à chaque ajustement.
3. Copiez le code généré : le générateur de badges fournit un HTML et un CSS propres et prêts pour la production. Copiez le snippet HTML, les styles CSS ou les deux ensemble. Le CSS inclut une mise en page inline-flex correcte, la taille de police, le padding, le border-radius et les états de survol. Utilisez le nom de classe personnalisé pour l'intégrer à votre design system existant.

• Plein : fond uni avec texte contrasté. La variante de badge visuellement la plus marquante. À utiliser pour les actions principales, les indicateurs de statut et les compteurs de notifications où le badge doit se démarquer immédiatement du contenu environnant.
• Contour : fond transparent avec une bordure colorée. La couleur de la bordure correspond à la couleur principale, et le texte utilise la même couleur. Parfait pour les informations secondaires où vous voulez que le libellé soit visible sans concurrencer le contenu principal.
• Subtil : fond légèrement teinté avec du texte coloré. Utilise la couleur principale comme teinte de fond claire (la couleur que vous fournissez sert de fond) avec un texte plus sombre. Idéal pour les tags de catégorie, les libellés de métadonnées et les badges de tokens de design system où le badge doit être visible sans être dominant.
• Fantôme : aucun fond, juste du texte coloré. La variante visuellement la moins marquante. À utiliser pour les libellés en ligne, les tags secondaires dans les interfaces denses et les situations où vous voulez indiquer une catégorie sans ajouter de poids visuel.

Lorsque vous utilisez des badges dans votre interface, tenez compte de ces bonnes pratiques d'accessibilité : assurez un contraste de couleur suffisant entre le fond du badge et le texte (WCAG AA exige un ratio de 4,5:1 pour le texte normal) ; utilisez la variante subtile avec prudence, car le fond clair peut ne pas offrir assez de contraste sur tous les écrans ; fournissez des aria-labels pour les boutons de fermeture afin d'aider les utilisateurs de lecteurs d'écran (notre HTML généré inclut aria-label="Remove") ; évitez de vous fier uniquement à la couleur pour transmettre un sens - combinez les badges de statut avec des libellés textuels pour les utilisateurs ayant des déficiences de la vision des couleurs ; et assurez-vous que les badges interactifs ont des indicateurs de focus visibles pour la navigation au clavier.