Componente de botón con variantes para Tailwind CSS

Autor: Ángel Julián
css code
.btn {
	@apply flex overflow-hidden relative items-center justify-center font-semibold py-3 px-9 rounded-button transition min-w-fit gap-2;

	&:focus {
	  @apply outline-none;
	}

	&:hover {
	  @apply scale-105 duration-500;
	}

	&-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;
	}

	&-link {
	  @apply bg-transparent text-zinc-800 border-0 px-0;
	}

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

	  &:hover {
		@apply duration-500 shadow-lg;
	  }
	}

	&-xs {
	  @apply text-xs py-2 px-4;
	}

	&-sm {
	  @apply text-sm py-3 px-6;
	}

	&-lg {
	  @apply text-lg py-4 px-8;
	}  

	&-xl {
	  @apply text-xl py-5 px-10;
	}

	&-wide {
	  padding-inline: calc(var(--spacing-1) * 10);
	}

	&-block {
	  @apply w-full;
	}
}

Este componente de botón está diseñado para ser altamente flexible y personalizable, permitiendo adaptar estilos, tamaños y variantes de acuerdo con las necesidades específicas de tu proyecto. 🚀

Características principales

  • Base sólida: Configuración predeterminada que incluye propiedades esenciales como diseño fluido, redondeo, transiciones suaves y espacio entre elementos.
  • Interactividad: Respuestas dinámicas al enfoque (focus) y al pasar el cursor (hover), incluyendo efectos de escala y transiciones.
  • Estilos predefinidos: Variantes listas para usar, como light, dark, primary, secondary, link y outline.
  • Tamaños personalizables: Opciones de tamaño (xs, sm, lg, xl) para adaptarse a diferentes contextos.
  • Diseño flexible: Clases para ancho completo (block) o estilo ancho adicional (wide).

Variantes disponibles

  1. Light (btn-light): Fondo claro y texto oscuro, ideal para interfaces minimalistas.
  2. Dark (btn-dark): Fondo oscuro con texto claro, perfecto para diseños con modo oscuro.
  3. Primary (btn-primary): Colores destacados, ideal para llamadas a la acción.
  4. Secondary (btn-secondary): Colores secundarios para complementos o acciones secundarias.
  5. Link (btn-link): Botón estilo enlace, sin fondo ni bordes.
  6. Outline (btn-outline): Botón con borde definido y sombra al pasar el cursor.

Tamaños personalizables

  • btn-xs: Tamaño extra pequeño.
  • btn-sm: Tamaño pequeño.
  • btn-lg: Tamaño grande.
  • btn-xl: Tamaño extra grande.

Extras

  • Ancho completo: Utiliza btn-block para un botón que ocupe toda la línea.
  • Estilo ancho adicional: Añade btn-wide para botones más amplios con espaciado extra.

Este componente ofrece una base escalable y sencilla para cualquier diseño, manteniendo la consistencia y flexibilidad que necesitas en tus proyectos. 🎨💻