Botón

Usa .btn con un modificador de color. Funciona en <button>, <a> e <input type="submit">.

Variantes

MóvilTabletEscritorioCompleto

HTML

<button type="button" class="btn btn--primary">Primary</button>
<button type="button" class="btn btn--secondary">Secondary</button>
<button type="button" class="btn btn--success">Success</button>
<button type="button" class="btn btn--danger">Danger</button>
<button type="button" class="btn btn--warning">Warning</button>
<button type="button" class="btn btn--info">Info</button>
<button type="button" class="btn">Neutro</button>

React

export default function BotonVariantes() {
  return (
    <>
      <button type="button" className="btn btn--primary">Primary</button>
      <button type="button" className="btn btn--secondary">Secondary</button>
      <button type="button" className="btn btn--success">Success</button>
      <button type="button" className="btn btn--danger">Danger</button>
      <button type="button" className="btn btn--warning">Warning</button>
      <button type="button" className="btn btn--info">Info</button>
      <button type="button" className="btn">Neutro</button>
    </>
  );
}

Contorno

btn--outline-{rol} deja el fondo transparente y se rellena en hover.

MóvilTabletEscritorioCompleto

HTML

<button type="button" class="btn btn--outline-primary">Primary</button>
<button type="button" class="btn btn--outline-secondary">Secondary</button>
<button type="button" class="btn btn--outline-success">Success</button>
<button type="button" class="btn btn--outline-danger">Danger</button>
<button type="button" class="btn btn--outline-warning">Warning</button>
<button type="button" class="btn btn--outline-info">Info</button>

React

export default function BotonContorno() {
  return (
    <>
      <button type="button" className="btn btn--outline-primary">Primary</button>
      <button type="button" className="btn btn--outline-secondary">Secondary</button>
      <button type="button" className="btn btn--outline-success">Success</button>
      <button type="button" className="btn btn--outline-danger">Danger</button>
      <button type="button" className="btn btn--outline-warning">Warning</button>
      <button type="button" className="btn btn--outline-info">Info</button>
    </>
  );
}

Ghost y link

Para acciones secundarias: btn--ghost muestra un fondo suave en hover y btn--link se ve como un enlace.

MóvilTabletEscritorioCompleto

HTML

<button type="button" class="btn btn--ghost">Ghost</button>
<button type="button" class="btn btn--link">Link</button>

React

export default function BotonGhostLink() {
  return (
    <>
      <button type="button" className="btn btn--ghost">Ghost</button>
      <button type="button" className="btn btn--link">Link</button>
    </>
  );
}

Tamaños

MóvilTabletEscritorioCompleto

HTML

<button type="button" class="btn btn--primary btn--sm">Pequeño</button>
<button type="button" class="btn btn--primary">Normal</button>
<button type="button" class="btn btn--primary btn--lg">Grande</button>

React

export default function BotonTamanos() {
  return (
    <>
      <button type="button" className="btn btn--primary btn--sm">Pequeño</button>
      <button type="button" className="btn btn--primary">Normal</button>
      <button type="button" className="btn btn--primary btn--lg">Grande</button>
    </>
  );
}

Con íconos

Los íconos SVG van dentro del botón, con aria-hidden="true". Miden 1.25em y toman el color del texto (currentColor). Para un botón con solo un ícono usa btn--icon y describe la acción con aria-label.

MóvilTabletEscritorioCompleto

HTML

<button type="button" class="btn btn--primary">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11M7 10l5 5 5-5M5 20h14" /></svg>
  Descargar
</button>
<button type="button" class="btn btn--outline-primary">
  Continuar
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
</button>
<button type="button" class="btn btn--primary btn--icon" aria-label="Agregar">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
</button>
<button type="button" class="btn btn--ghost btn--icon" aria-label="Cerrar">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" /></svg>
</button>

React

export default function BotonIconos() {
  return (
    <>
      <button type="button" className="btn btn--primary">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 4v11M7 10l5 5 5-5M5 20h14" /></svg>
        Descargar
      </button>
      <button type="button" className="btn btn--outline-primary">
        Continuar
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
      </button>
      <button type="button" className="btn btn--primary btn--icon" aria-label="Agregar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
      </button>
      <button type="button" className="btn btn--ghost btn--icon" aria-label="Cerrar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" /></svg>
      </button>
    </>
  );
}

Ancho completo

MóvilTabletEscritorioCompleto

HTML

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

React

export default function BotonBloque() {
  return (
    <button type="button" className="btn btn--primary btn--block">Enviar mensaje</button>
  );
}

Estados

• Deshabilitado: atributo disabled (o la clase is-disabled).
• Activo: aria-pressed="true" en botones que se activan y desactivan, aria-expanded="true" en botones que abren un menú, o la clase is-active.

MóvilTabletEscritorioCompleto

HTML

<button type="button" class="btn btn--primary" disabled>Deshabilitado</button>
<button type="button" class="btn btn--outline-primary" aria-pressed="true">Activo</button>
<button type="button" class="btn btn--outline-primary" aria-pressed="false">Inactivo</button>

React

export default function BotonEstados() {
  return (
    <>
      <button type="button" className="btn btn--primary" disabled>Deshabilitado</button>
      <button type="button" className="btn btn--outline-primary" aria-pressed="true">Activo</button>
      <button type="button" className="btn btn--outline-primary" aria-pressed="false">Inactivo</button>
    </>
  );
}

Como enlace

Usa <a> si el botón lleva a otra página y <button> si ejecuta una acción. Para deshabilitar un enlace, quita el href y agrega aria-disabled="true".

MóvilTabletEscritorioCompleto

HTML

<a href="#" class="btn btn--primary">Enlace</a>
<input type="submit" class="btn btn--outline-primary" value="Enviar">
<a class="btn btn--primary" aria-disabled="true">Enlace deshabilitado</a>

React

export default function BotonEnlaces() {
  return (
    <>
      <a href="#" className="btn btn--primary">Enlace</a>
      <input type="submit" className="btn btn--outline-primary" value="Enviar" />
      <a className="btn btn--primary" aria-disabled="true">Enlace deshabilitado</a>
    </>
  );
}

Accesibilidad

• Agrega type="button" a los botones que no envían un formulario (el tipo por defecto es submit).
• El foco con teclado muestra un contorno de 2 px en el color primary.
• Un botón con solo un ícono necesita aria-label.
• Las transiciones se desactivan con prefers-reduced-motion.
• Con los colores por defecto, estas variantes quedan bajo el contraste AA (4,5:1) para texto normal: btn--success (3,4:1), btn--outline-secondary y btn--outline-warning (1,6:1) y btn--outline-info (1,7:1). Evítalas para texto importante o ajusta los colores en el tema.

Clases

Clase	Uso
btn	Base. Sin modificador es un botón neutro.
btn--{rol}	Sólido: primary, secondary, success, danger, warning, info.
btn--outline-{rol}	Contorno, con los mismos roles.
btn--ghost	Transparente, con fondo suave en hover.
btn--link	Con aspecto de enlace.
btn--sm, btn--lg	Tamaños.
btn--block	Ocupa todo el ancho.
btn--icon	Solo ícono (cuadrado). Requiere aria-label.
is-active, is-disabled	Estados por clase.

Variables

Se cambian en el CSS del sitio con un selector que apunte al botón, como .hero .btn (definirlas en un contenedor no basta: .btn las redefine).

Variable	Valor por defecto	Uso
--ds-btn-bg	color-mix(in srgb, var(--ds-color-text) 10%, var(--ds-color-surface))	Fondo.
--ds-btn-color	var(--ds-color-text)	Color del texto y de los íconos.
--ds-btn-border-color	transparent	Color del borde.
--ds-btn-hover-bg	color-mix(in srgb, var(--ds-color-text) 18%, var(--ds-color-surface))	Fondo en hover y estado activo.
--ds-btn-hover-color	var(--ds-btn-color)	Texto en hover y estado activo.
--ds-btn-hover-border-color	var(--ds-btn-border-color)	Borde en hover y estado activo.
--ds-btn-padding-y	0.375rem	Espacio vertical interno.
--ds-btn-padding-x	0.75rem	Espacio horizontal interno.
--ds-btn-gap	var(--ds-space-2)	Separación entre ícono y texto.
--ds-btn-font-family	var(--ds-font-family-base)
--ds-btn-font-size	var(--ds-font-size-base)
--ds-btn-font-weight	var(--ds-font-weight-regular)
--ds-btn-line-height	var(--ds-line-height-base)
--ds-btn-radius	var(--ds-radius-full)	Radio de las esquinas (píldora).
--ds-btn-focus-color	var(--ds-color-primary)	Color del contorno de foco.
--ds-btn-disabled-opacity	0.5	Opacidad cuando está deshabilitado.