Generador de badges

• Generación instantánea de badges: crea badges y componentes pill CSS al instante con nuestro generador. Ajusta texto, tamaño, color, variante y forma en tiempo real: la vista previa se actualiza de inmediato al cambiar cualquier ajuste. Sin idas y vueltas al servidor ni esperas.
• Privado, sin subidas a servidores: el generador de badges se ejecuta por completo en tu navegador. Todas las configuraciones de badge, elecciones de color y el código generado permanecen en tu dispositivo: nada se sube a ningún servidor.
• 12 presets de color y colores personalizados: elige entre 12 presets integrados que cubren los tipos de badge habituales (Primary, Success, Warning, Error, Info, Neutral, Sutil, Contorneado, Interactivo y presets de tamaño). Cada preset aplica una configuración completa (colores, variante, tamaño y opciones) o personaliza cada detalle manualmente.
• Copia HTML + CSS con un clic: copia el fragmento HTML generado, los estilos CSS o ambos a la vez con un clic. El generador de badges produce código listo para producción con nombres de clase limpios, diseño inline-flex correcto y estados hover/interactivos completos.

• Badges de estado para componentes de UI: los desarrolladores de React y Vue usan el generador de badges para crear indicadores de estado para tablas de datos, tarjetas de panel y elementos de listas. Los badges generados funcionan directamente con frameworks de componentes: pega el CSS en tu hoja de estilos y usa el HTML como plantilla de componente para estados de pedido, roles de usuario y alertas del sistema.
• Etiquetas de producto de comercio electrónico: las tiendas online usan el generador de badges para crear etiquetas de producto como «Oferta», «Nuevo», «Más vendido» y «Edición limitada». Usa el preset pill interactivo con los colores de tu marca para crear badges de producto que llamen la atención sin eclipsar la imagen del producto. La variante contorneada funciona bien para etiquetados discretos.
• Badges de notificación de apps móviles: los diseñadores de UI móvil usan el generador de badges para prototipar contadores de notificaciones, indicadores de no leído y puntos de estado para interfaces de apps móviles. Los tamaños XS y SM con forma pill producen el aspecto de badge de notificación familiar que funciona en elementos de navegación de iOS y Android.
• Etiquetas y tags de contenido de CMS: los creadores de sitios de WordPress y CMS usan el generador de badges para crear tags de categoría, etiquetas de entradas e indicadores de tipo de contenido. La variante sutil es perfecta para los metadatos de una entrada de blog: aporta distinción visual sin la pesadez de los badges rellenos, manteniendo el foco en el contenido.
• Badges de tokens de sistemas de diseño: los responsables de sistemas de diseño usan el generador de badges para crear componentes de badge coherentes que usan los colores de los tokens de diseño. El CSS generado usa nombres de clase y valores de color personalizables que pueden mapearse a propiedades personalizadas de CSS, lo que facilita tematizar badges en modos claro y oscuro.
• Tags de roles y permisos de usuario: las aplicaciones SaaS usan el generador de badges para crear badges de rol de usuario (Admin, Moderador, Editor, Suscriptor) con colores distintos para cada rol. La opción de punto indicador añade una señal visual de estado, y la opción de botón de cierre permite interfaces de tipo tag eliminables para chips de filtro y listas de selección.

Un badge (también llamado pill, tag, chip o etiqueta) es un pequeño elemento de interfaz en línea que se usa para etiquetar, categorizar o resaltar contenido. Los badges suelen ser compactos, tener un color de fondo distintivo y usar esquinas redondeadas o formas pill para destacar del contenido que los rodea. Algunos ejemplos habituales son contadores de notificaciones («3»), indicadores de estado («Activo», «Pendiente»), etiquetas de contenido («Nuevo», «Oferta») y tags de rol de usuario («Admin»). Nuestro generador de badges crea HTML y CSS listos para producción para componentes de badge que pueden usarse directamente en cualquier proyecto web.

1. Elige un preset o empieza a personalizar: selecciona entre 12 presets que cubren tipos de badge habituales (colores de estado como success, warning, error, info; variantes visuales como relleno, contorneado, sutil y fantasma; tamaños de XS a XL; y funciones especiales como punto indicador, botón de cierre y efectos hover interactivos). Cada preset establece varias propiedades a la vez para iterar rápido.
2. Personaliza cada detalle: ajusta el texto del badge, el tamaño, la variante, la forma (redondeada, pill o cuadrada), el color principal y el color del texto. Activa o desactiva funciones opcionales como un punto indicador de estado, un botón de cierre/eliminar con efecto hover, o estados hover y clic interactivos. La vista previa en vivo se actualiza en tiempo real al ajustar cualquier valor.
3. Copia el código generado: el generador de badges ofrece una salida HTML y CSS limpia y lista para producción. Copia el fragmento HTML, los estilos CSS o ambos juntos. El CSS incluye un diseño inline-flex correcto, tamaño de fuente, padding, border-radius y estados hover. Usa el nombre de clase personalizado para integrarlo con tu sistema de diseño existente.

• Relleno: fondo sólido con texto contrastado. Es la variante de badge visualmente más prominente. Úsala para acciones principales, indicadores de estado y contadores de notificaciones en los que el badge debe destacar de inmediato del contenido que lo rodea.
• Contorneado: fondo transparente con un borde de color. El color del borde coincide con el color principal y el texto usa el mismo color. Perfecta para información secundaria en la que quieres que la etiqueta sea visible sin competir con el contenido principal.
• Sutil: fondo con un tinte claro y texto de color. Usa el color principal como tinte de fondo claro (el color que indicas se usa como fondo) con texto más oscuro. Ideal para tags de categoría, etiquetas de metadatos y badges de tokens de sistemas de diseño en los que el badge debe verse pero no dominar.
• Fantasma: sin fondo, solo texto de color. Es la variante visualmente menos prominente. Úsala para etiquetas en línea, tags secundarios en interfaces densas y situaciones en las que quieres indicar una categoría sin añadir peso visual.

Al usar badges en tu interfaz, ten en cuenta estas buenas prácticas de accesibilidad: asegúrate de que haya suficiente contraste de color entre el fondo del badge y el texto (WCAG AA exige una ratio de 4,5:1 para texto normal); usa la variante sutil con precaución, ya que el fondo claro puede no ofrecer suficiente contraste en todas las pantallas; proporciona aria-labels para los botones de cierre para ayudar a los usuarios de lectores de pantalla (nuestro HTML generado incluye aria-label="Remove"); evita depender solo del color para transmitir significado: combina los badges de estado con etiquetas de texto para usuarios con deficiencias en la visión del color; y asegúrate de que los badges interactivos tengan indicadores de foco visibles para la navegación por teclado.