Componente de Badges con Tailwind CSS

Autor: Angel Julían
css code
.badge {
	@apply text-sm py-0.5 px-4 rounded-md max-w-fit bg-primary-100 font-semibold text-primary-500 uppercase;

	&-light {
	  @apply bg-zinc-100 text-zinc-800 border border-zinc-100;
	}

	&-dark {
	  @apply bg-zinc-700 text-zinc-100 border border-zinc-700;
	}

	&-primary {
	  @apply bg-primary-500 text-zinc-100 border border-primary-500;
	}

	&-secondary {
	  @apply bg-secondary-500 text-zinc-100 border border-secondary-500;
	}

	&-outline {
	  @apply bg-white text-zinc-700 border border-zinc-700;
	}

	&-link {
	  @apply text-zinc-700 px-0;
	}
}

Este componente de badge ofrece una solución versátil para resaltar información o etiquetas en tus diseños. Su estructura flexible y variantes predefinidas permiten una integración rápida y personalizable en cualquier proyecto. 🎯

Características principales

  • Base adaptable: Incluye texto en tamaño pequeño, bordes redondeados y estilo visual limpio con opciones de color predefinidas.
  • Variedad de estilos: Diferentes variantes para ajustarse a contextos claros, oscuros o con colores destacados.
  • Uso optimizado: Diseñado con max-w-fit para ajustarse automáticamente al contenido.
  • Estilo destacado: Texto en mayúsculas y fuente seminegrita para mayor legibilidad e impacto visual.

Variantes disponibles

  1. Light (badge-light): Fondo claro y texto oscuro, ideal para entornos minimalistas.
  2. Dark (badge-dark): Fondo oscuro y texto claro, perfecto para diseños en modo oscuro.
  3. Primary (badge-primary): Colores destacados que llaman la atención, perfectos para etiquetas importantes.
  4. Secondary (badge-secondary): Una opción complementaria para etiquetas secundarias.
  5. Outline (badge-outline): Fondo blanco con borde definido, ideal para estilos más sutiles.
  6. Link (badge-link): Estilo ligero, sin fondo ni bordes, con un diseño que se asemeja a un enlace.

Ejemplos de uso

  • Badge de estado: Indicar el estado de un elemento (e.g., «Activo», «Pendiente»).
  • Categorías: Agrupar elementos por temática.
  • Destacados: Etiquetas como «Nuevo» o «Oferta».

Ventajas del componente

  • Consistencia visual: Diseñado para mantener uniformidad en el estilo de tus proyectos.
  • Escalabilidad: Fácil de adaptar y extender según las necesidades del diseño.
  • Flexibilidad: Variantes predefinidas que se integran con diferentes paletas de colores y estilos.

Este componente de badge es una herramienta sencilla pero poderosa para mejorar la organización y presentación visual de tu interfaz. 💻✨