Botón

Código

Copiar el marcado

Un button sin clase no necesita ninguna. Sin type, o con type="submit", es la acción principal; type="button" es la secundaria:

<button type="submit">Save changes</button>
<button type="button">Cancel</button>

.luz-btn añade lo que el HTML no puede decir: el aspecto de botón en un a, los papeles, los tamaños y el ancho completo. Con la clase:

<button class="luz-btn luz-btn--primary" type="button">Save changes</button>

Un enlace a otra página con aspecto de botón:

<a class="luz-btn luz-btn--outline" href="/pricing/">See the plans</a>

Todo el ancho de un contenedor estrecho, como una tarjeta o un formulario en un móvil:

<form action="/cart/add" method="post">
  <button class="luz-btn luz-btn--primary luz-btn--block" type="submit">Add to cart</button>
</form>

Con un icono, antes o después de la etiqueta, o solo. Toma el icono de Iconos o dibuja el tuyo sobre la misma cuadrícula de 24 × 24:

<button class="luz-btn luz-btn--primary" type="submit">
  <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 4h2.5l2.2 10.5h9.6L19.5 7H6.2"/><circle cx="9" cy="19" r="1.4"/><circle cx="17" cy="19" r="1.4"/></svg>
  Add to cart
</button>

<!-- After the label: an icon that points to the end of the line carries data-luz-flip -->
<a class="luz-btn luz-btn--outline" href="/checkout/">
  Next step
  <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" data-luz-flip=""><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>

<!-- Icon only: the name is real text, hidden from the eye -->
<button class="luz-btn luz-btn--ghost" type="button">
  <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 5v14M5 12h14"/></svg>
  <span class="u-sr-only">Add</span>
</button>

Variantes y opciones

Combina .luz-btn con una variante y, si hace falta, un tamaño y el ancho completo.

La altura predeterminada es 44 px. El icono mide 16 px en todos los tamaños.

Cómo funciona

Un <button> (o <a>) nativo con clases de components/button.css. No necesita JavaScript.

• Define type="button" salvo que el botón envíe un formulario; el tipo predeterminado es submit.
• La altura es mínima: la etiqueta puede crecer junto con el tamaño de fuente del lector.
• .luz-btn--block establece inline-size: 100%. Úsalo cuando el botón sea el único elemento de su fila: en una fila flex ocuparía todo el espacio. Su etiqueta ocupa varias líneas y las palabras que no caben se dividen para que nada sobresalga con 320 px de ancho o texto al 200 %.

Sin JavaScript

Un botón funciona como cualquier botón nativo: envía el formulario o no hace nada. Tu script define qué ocurre al hacer clic.

En esta página, las opciones Pruébalo y Ancho del ejemplo necesitan JavaScript: sin él no se muestran, pero sí aparecen los ejemplos y su marcado.

Teclado y ARIA

Con Tab se llega al botón; Enter o Espacio lo activa. Un enlace con aspecto de botón solo responde a Enter, como cualquier enlace.

• No hace falta ARIA: la etiqueta visible es el nombre.
• Un icono lleva aria-hidden="true" y focusable="false": la etiqueta da nombre al botón. Un botón que solo tiene un icono toma su nombre de un texto con .u-sr-only, no de un aria-label: ese texto se traduce con la página.
• Tab omite los botones desactivados y es posible que los lectores de pantalla no los encuentren: es preferible usar un botón activo que explique qué falta.

El contraste y el foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa un botón para iniciar una acción en la página actual: guardar, enviar, eliminar o abrir un diálogo.

• Un botón principal por vista, para la acción que realiza la mayoría.
• Usa botones secundarios, de contorno o fantasma para las demás acciones.
• Usa el ancho completo (.luz-btn--block) cuando la acción sea lo único que hay en un contenedor estrecho: una tarjeta, un cajón o el botón para enviar un formulario en un móvil.

Cuándo no usarlo

No uses un botón para ir a otra página: usa un enlace, con aspecto de botón solo si es la llamada principal a la acción.

• Para mostrar varias acciones relacionadas en una fila, usa un grupo de acciones.
• No desactives un botón para ocultar una acción que el lector aún no puede realizar: explica el motivo.
• No extiendas un botón por una columna ancha: una barra de 1.000 px no es un botón. Dos acciones en paralelo son dos botones con su propio ancho.

Qué hacer y qué no

Cómo escribir el contenido

Empieza con un verbo e indica el resultado: «Guardar cambios», «Eliminar borrador».

• No uses «Vale», «Enviar» ni «Haz clic aquí».
• Mayúscula inicial, dos o tres palabras y sin punto final.
• Usa las mismas palabras para la misma acción en todas partes.
• Un botón de ancho completo invita a usar etiquetas largas: limítala a unos 24 caracteres o permite que ocupe varias líneas.

Contraste y foco

Los botones con relleno usan texto blanco; los de contorno y fantasma usan texto de marca sobre la página.

Medido a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo requerido es el de WCAG 2.2 AA: 4,5:1 para texto y 3:1 para anillos de foco, bordes e iconos. El texto desactivado no tiene un mínimo WCAG; LUZ exige 3:1.

• Foco: todas las variantes tienen un contorno de 2 px --luz-focus-ring, situado a 2 px del botón.
• No depende solo del color: un botón desactivado tiene un borde discontinuo; en la variante de contorno, el borde y el texto usan el color de marca.
• Objetivo táctil: 44 px de alto de forma predeterminada y 36 px para .luz-btn--sm, con o sin ancho completo. Usa el tamaño predeterminado cuando se vaya a pulsar con el pulgar (44 px es el objetivo mejorado de WCAG 2.5.5, nivel AAA).

Tokens que usa

Los 26 tokens que lee components/button.css, agrupados por familia. Cada familia enlaza a su página, donde aparecen los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color

--luz-brand-fill, --luz-brand-fill-active, --luz-brand-fill-hover, --luz-brand-primary, --luz-brand-subtle, --luz-color-danger-fill, --luz-focus-ring, --luz-outline, --luz-surface-strong, --luz-text-disabled, --luz-text-on-fill, --luz-text-primary

Spacing and sizing

--luz-control-lg, --luz-control-md, --luz-control-xl, --luz-space-2xs, --luz-space-lg, --luz-space-sm, --luz-space-xl, --luz-space-xs

Typography

--luz-font-sans, --luz-text-base, --luz-text-md, --luz-text-sm

Radius

--luz-radius-md

Motion

--luz-duration-fast

El teclado y ARIA están en la pestaña Código.