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>