# Botón

Inicia una acción en la página actual, como guardar, enviar o abrir un diálogo.

### Problemas conocidos
Ninguno conocido.

### 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:

Bare button markup
```html
<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:

Primary button markup
```html
<button class="luz-btn luz-btn--primary" type="button">Save changes</button>
```

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

Link styled as a button markup
```html
<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:

Full-width button markup
```html
<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](https://nandovejer.github.io/luz/es/docs/components/icons/) o dibuja el tuyo sobre la misma cuadrícula de 24 × 24:

Button with an icon markup
```html
<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.

- `.luz-btn--primary`: Relleno de marca: la acción principal de la vista
- `.luz-btn--secondary`: Superficie neutra intensa: una acción secundaria
- `.luz-btn--outline`: Texto y borde de marca, sin relleno
- `.luz-btn--ghost`: Solo texto de marca: una acción de baja prioridad
- `.luz-btn--danger`: Relleno de peligro: una acción que elimina o no se puede deshacer
- `.luz-btn--sm`: 36 px de alto, texto pequeño
- `.luz-btn--lg`: 56 px de alto, texto base
- `.luz-btn--block`: Ocupa el ancho del contenedor y permite que la etiqueta ocupe varias líneas: para tarjetas, formularios o cajones, no para columnas anchas
- `<svg>` dentro: Un icono de 16 × 16 px, antes o después de la etiqueta, a poca distancia de ella y del color del texto
- `disabled`: Texto atenuado, borde discontinuo y sin eventos de puntero

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.

### 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](https://nandovejer.github.io/luz/es/docs/components/layout/#objects-actions).
- 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.