Botones — FDS Docs

Variantes de Color

6 variantes de color que cubren el espectro completo: desde neutros claros y oscuros, pasando por la paleta de marca (primary/secondary), hasta opciones transparentes como outline y link.

Light Dark Primary Secondary Outline Link

HTML

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

Clase	Fondo	Uso recomendado
`.btn-light`	#f5f5f5 (gris claro)	Acciones secundarias sobre fondos oscuros
`.btn-dark`	#404040 (gris oscuro)	Acciones secundarias sobre fondos claros
`.btn-primary`	Primary 500 (OKLCH)	CTA principal, acción más importante
`.btn-secondary`	Secondary 500 (OKLCH)	Acción complementaria al primary
`.btn-outline`	Transparente + borde	Acciones alternativas, menor jerarquía visual
`.btn-link`	Transparente, sin borde	Acciones terciarias, navegación contextual

Tamaños

5 tamaños controlados via font-size. El padding se hereda proporcionalmente gracias a las unidades em en --btn-py y --btn-px. Cambiar el font-size escala todo el botón automáticamente.

Extra Small Small Default Large Extra Large

HTML

<a class="btn btn-primary btn-xs" href="#">Extra Small</a>
<a class="btn btn-primary btn-sm" href="#">Small</a>
<a class="btn btn-primary" href="#">Default</a>
<a class="btn btn-primary btn-lg" href="#">Large</a>
<a class="btn btn-primary btn-xl" href="#">Extra Large</a>

Clase	Font-size	Uso recomendado
`.btn-xs`	0.75rem	Acciones inline, badges interactivos, tablas
`.btn-sm`	0.875rem	Barras de herramientas, formularios compactos
(default)	inherit	Uso general, CTAs estándar
`.btn-lg`	1.125rem	CTAs destacados, heroes
`.btn-xl`	1.25rem	Impacto máximo, landing pages

Formas

Modificadores de forma que alteran el border-radius o el aspecto del botón. Combinables con cualquier variante de color y tamaño.

Default Rounded Wide

HTML

<a class="btn btn-primary" href="#">Default</a>
<a class="btn btn-primary btn-rounded" href="#">Rounded</a>
<a class="btn btn-primary btn-circle" href="#" aria-label="Accion">+</a>
<a class="btn btn-primary btn-wide" href="#">Wide</a>

Clase	Border-radius	Efecto
(default)	var(--radius-sm)	Esquinas ligeramente redondeadas
`.btn-rounded`	9999px	Pastilla (pill shape)
`.btn-circle`	9999px + aspect-ratio: 1	Circulo perfecto, ideal para iconos
`.btn-wide`	(no cambia)	Padding horizontal x1.5, más espacio lateral

Ancho Completo

.btn-block expande el botón al 100% del ancho de su contenedor. Util para formularios, modales o layouts de una sola columna donde el botón debe ocupar todo el espacio disponible.

Botón full width

Otro botón full width

HTML

<a class="btn btn-primary btn-block" href="#">Boton full width</a>
<a class="btn btn-outline btn-block" href="#">Otro boton full width</a>

Combinaciones

Todas las clases son componibles: color + tamaño + forma se pueden mezclar libremente. El orden de las clases no importa.

Outline + Rounded + LG Dark + SM + Wide Secondary + Rounded + XS

HTML

<a class="btn btn-outline btn-rounded btn-lg" href="#">Outline + Rounded + LG</a>
<a class="btn btn-dark btn-sm btn-wide" href="#">Dark + SM + Wide</a>
<a class="btn btn-secondary btn-rounded btn-xs" href="#">Secondary + Rounded + XS</a>

La clase .btn base siempre es obligatoria. Las variantes de color, tamaño y forma son opcionales y aditivas.

Estilo Automático de Submit

Los botones button[type="submit"] reciben estilo primary automáticamente sin necesidad de clases adicionales. Esto garantiza que todo formulario tenga un CTA visible por defecto.

HTML

<form>
  <label>Email</label>
  <input type="email" placeholder="tu@email.com">

  <!-- No necesita .btn ni .btn-primary -->
  <button type="submit">Enviar</button>
</form>

El auto-styling usa font-weight: 400 (regular) en lugar del 600 de .btn. Si necesitas el peso semibold, agrega la clase .btn explicitamente.

Variables CSS

Todas las propiedades del sistema de botones son personalizables via CSS custom properties en :root. Modificalas para adaptar los botones al branding de tu proyecto sin tocar el CSS del componente.

CSS components/buttons.css

:root {
  /* Padding vertical y horizontal (em = proporcional al font-size) */
  --btn-py: 0.6em;
  --btn-px: 1.75em;

  /* Color de texto para variantes solidas */
  --btn-primary-color: #f5f5f5;
  --btn-secondary-color: #f5f5f5;

  /* Variante outline */
  --btn-outline-bg: transparent;
  --btn-outline-border: currentColor;
  --btn-outline-color: var(--text-primary);
}

Variable	Default	Descripción
`--btn-py`	0.6em	Padding vertical. En `em` para escalar con el font-size
`--btn-px`	1.75em	Padding horizontal. En `em` para escalar con el font-size
`--btn-primary-color`	#f5f5f5	Color de texto del botón primary
`--btn-secondary-color`	#f5f5f5	Color de texto del botón secondary
`--btn-outline-bg`	transparent	Color de fondo del botón outline
`--btn-outline-border`	currentColor	Color del borde del botón outline
`--btn-outline-color`	var(--text-primary)	Color de texto del botón outline

El uso de em para el padding es clave: al cambiar el tamaño con .btn-sm o .btn-lg, el padding escala proporcionalmente sin necesidad de redefinirlo.