Botones

La clase base .btn expone variantes de color, tamaño y forma que se combinan libremente. Todo el sistema se configura vía CSS variables, así que personalizar un botón es cambiar un token, no reescribir CSS.

Variantes de color

Seis variantes que cubren el espectro: neutros claros y oscuros, paleta de marca y opciones transparentes.

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-outline">Outline</button>
<a class="btn btn-link" href="#">Link</a>

Tamaños

Cinco tamaños controlados vía font-size. El padding hereda proporcionalmente gracias a em en --btn-py y --btn-px: cambiar el font-size escala todo el botón sin tocar nada más.

<button class="btn btn-primary btn-xs">XS</button>
<button class="btn btn-primary btn-sm">SM</button>
<button class="btn btn-primary">Base</button>
<button class="btn btn-primary btn-lg">LG</button>
<button class="btn btn-primary btn-xl">XL</button>

Formas

Modificadores de border-radius o aspecto. Combinables con cualquier variante de color y tamaño.

<button class="btn btn-primary btn-rounded">Rounded</button>
<button class="btn btn-primary btn-circle" aria-label="Añadir">+</button>
<button class="btn btn-primary btn-wide">Wide</button>

Ancho completo

.btn-block expande el botón al 100 % del contenedor. Útil en formularios, modales o layouts de una sola columna.

<button class="btn btn-primary btn-block">Enviar formulario</button>

Combinaciones

Todas las clases son aditivas y el orden no importa. La base .btn siempre es obligatoria.

<a class="btn btn-primary btn-lg btn-rounded" href="#">CTA grande</a>
<button class="btn btn-outline btn-sm btn-wide">Outline wide</button>

Submit automático

Los button[type="submit"] reciben estilo primary automáticamente, sin clases adicionales. Usa font-weight: 400 en vez del 600 de .btn estándar; si necesitas el peso semibold, añade .btn explícitamente.

<form>
  <input type="email" required>
  <button type="submit">Suscribirme</button>
</form>

Variables CSS

Todas las propiedades del sistema son personalizables sobrescribiendo tokens: