01Component / UI

Button

Polimórfico

Un sistema de botones reutilizable para acciones consistentes, navegación y estados interactivos en mis interfaces de Next.js; un componente que renderiza un <button> real o un <a> real dependiendo de lo que le pases.

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
6 variants3 sizesButton or LinkTyped icons
<Button />Live specimen

size="lg" → 48px height · 16px radius

<Button variant="primary" size="lg">Get started</Button>
02Playground Interactivo

Construye tu botón

Explora el componente modificando sus propiedades y mira el resultado al instante.

En vivo · estado del lado del cliente
Variant
Size
Icon
Content
Width
State
button-preview.tsx
variant="primary" size="md"
Generated code
<Button
variant="primary"
size="md"
>
Get started
</Button>
03Anatomía Del Botón

Construido a partir de piezas simples

Una mirada más cercana a la estructura detrás del componente y los elementos que hacen que cada interacción sea coherente.

Specimen · size lg · focus

  • Radio de borde

    Define la forma visual y mantiene la coherencia entre variantes.

  • Contenido

    La etiqueta principal que comunica la acción.

  • Icono

    Elemento visual opcional que refuerza la acción.

  • Espaciado

    El relleno (padding) interno uniforme mantiene el botón equilibrado en todos los tamaños.

  • Área de interacción

    Mantiene el área enlazada o clickeable clara y predecible.

  • Anillo de enfoque

    Proporciona un estado de interacción visible para la navegación por teclado.