Botones

El sistema de botones de FDS parte de una clase base, .btn, y la combina con variantes de color, tamano, forma y ancho. La idea no es crear una clase distinta para cada caso, sino componer una pequena API estable.

Usa botones para acciones. Si el elemento navega a otra pagina, puede ser un <a> con clase .btn. Si ejecuta una accion en la interfaz o envia un formulario, debe ser un <button>.

Anatomia

<a class="btn btn-primary" href="/contacto/">Contactar</a>

La clase .btn aporta layout, alineacion, transicion, gap interno y padding. La variante decide la jerarquia visual:

.btn {
  @apply flex overflow-hidden relative items-center justify-center
         font-semibold rounded-button transition min-w-fit gap-2 duration-normal
         py-[var(--btn-py)] px-[var(--btn-px)];
}

El padding usa em, por eso las variantes de tamano escalan el boton completo al cambiar el font-size.

Variantes de color

<div class="grid gap-block">
  <div class="grid gap-content max-w-3xl">
    <span class="eyebrow w-fit">Sistema de botones</span>
    <h2 class="heading-sm">Una API pequena para muchas jerarquias</h2>
    <p class="text-medium">
      Combina la clase base con una variante de color segun la importancia de la accion.
    </p>
  </div>

  <div class="grid grid-cols-1 gap-block sm:grid-cols-2 max-w-3xl">
    <a class="btn btn-primary btn-block" href="#">Primary</a>
    <a class="btn btn-secondary btn-block" href="#">Secondary</a>
    <a class="btn btn-outline btn-block" href="#">Outline</a>
    <a class="btn btn-light btn-block" href="#">Light</a>
    <a class="btn btn-dark btn-block" href="#">Dark</a>
    <a class="btn btn-link w-fit" href="#">Link</a>
  </div>
</div>

Tamanos y layout

<div class="grid gap-block">
  <div class="grid gap-content max-w-4xl">
    <span class="eyebrow w-fit">Botones responsivos</span>
    <h2 class="heading-sm">El padding escala con el tamano del texto</h2>
  </div>

  <div class="grid grid-cols-1 gap-block sm:grid-cols-2 max-w-3xl">
    <a class="btn btn-primary btn-xs btn-block" href="#">Extra small</a>
    <a class="btn btn-primary btn-sm btn-block" href="#">Small</a>
    <a class="btn btn-primary btn-block" href="#">Default</a>
    <a class="btn btn-primary btn-lg btn-block" href="#">Large</a>
    <a class="btn btn-primary btn-xl btn-block" href="#">Extra large</a>
  </div>

  <div class="grid grid-cols-1 gap-block sm:grid-cols-2 max-w-3xl">
    <a class="btn btn-outline btn-wide btn-block" href="#">Wide</a>
    <a class="btn btn-secondary btn-rounded btn-block" href="#">Rounded</a>
    <a class="btn btn-dark btn-block" href="#">Block</a>
    <a class="btn btn-primary btn-circle w-fit" href="#" aria-label="Abrir">+</a>
  </div>
</div>

Para icon buttons, usa .btn-circle y anade un aria-label si no hay texto visible:

<button class="btn btn-primary btn-circle" aria-label="Abrir menu">
  <svg aria-hidden="true">...</svg>
</button>

Casos de uso

CTA principal

Patron habitual para heroes, cabeceras de seccion o bloques comerciales:

<div class="grid grid-cols-1 gap-content sm:grid-cols-2">
  <a class="btn btn-primary btn-block" href="/registro/">Empezar ahora</a>
  <a class="btn btn-outline btn-block" href="/docs/">Ver documentacion</a>
</div>

Formulario

FDS aplica estilo primary automaticamente a button[type="submit"]. Esto facilita formularios generados por Gutenberg, Bricks o plugins donde no siempre controlas todas las clases:

<form>
  <button type="submit">Enviar</button>
</form>

Accion dentro de una card

En cards o listados, .btn-link funciona bien cuando la accion no debe competir con el titulo:

<article class="card card-elevated">
  <h3 class="subheading-sm">Servicio destacado</h3>
  <p class="text-medium">Descripcion breve del servicio.</p>
  <a class="btn btn-link" href="/servicios/">Leer mas</a>
</article>

<div class="grid gap-block">
  <div class="card card-elevated grid gap-block">
    <span class="eyebrow w-fit">CTA principal</span>
    <h2 class="subheading-lg">Publica una landing con jerarquia clara</h2>
    <p class="text-medium">
      Usa primary para la accion de negocio y outline o link para rutas secundarias.
    </p>
    <div class="grid grid-cols-1 gap-content sm:grid-cols-2">
      <a class="btn btn-primary btn-block" href="#">Empezar ahora</a>
      <a class="btn btn-outline btn-block" href="#">Ver documentacion</a>
    </div>
  </div>

  <form class="card card-outline grid gap-block">
    <label class="text-small" for="email">Email</label>
    <input id="email" class="w-full rounded-md border border-neutral-300 px-4 py-3" type="email" placeholder="tu@email.com" />
    <button type="submit">Enviar formulario</button>
  </form>
</div>

Configuracion

Los botones dependen de variables declaradas en theme/flowtitude.css:

--btn-py: 0.6em;
--btn-px: 1.75em;
--btn-primary-color: var(--color-neutral-100);
--btn-secondary-color: var(--color-neutral-100);
--btn-outline-bg: transparent;
--btn-outline-border: currentColor;
--btn-outline-color: var(--color-neutral-800);
--radius-button: var(--radius-sm);

Como --btn-py y --btn-px usan em, un cambio en .btn-lg o .btn-sm afecta tambien al padding resultante. Esto mantiene proporcion visual sin crear tokens de padding por cada tamano.

WordPress y Bricks

En Bricks puedes aplicar btn btn-primary, btn btn-outline o cualquier combinacion directamente en el campo de clases. Para botones de formulario, si el markup final usa button[type="submit"], FDS ya lo convierte en primary.

En Gutenberg conviene revisar si el bloque de botones anade clases propias. Si necesitas que un enlace de Gutenberg mantenga apariencia de boton, aplica las clases FDS al enlace final, no solo al wrapper.

Errores comunes