Distintas variantes de botones para su uso en formularios, llamadas a la acción, etc.
Estilos de botones en función de su peso o importancia en la página. Todos los botones necesitan de la clase .btn más la clase de variante (por ejemplo, .btn--primary). Estos estilos de botón se pueden usar tanto con un <button>, un <input type="submit"> o un <a>.
display:inline-block. Para que un botón quede aislado en su línea, o se centre o alinee a la derecha, se necesita un contenedor, al cual se le puede añadir una clase utilitaria.
<button class="btn btn--primary">Botón Primario</button>
<button class="btn btn--secondary">Botón Secundario</button>
<button class="btn btn--call-to-action">Call to action</button>
La clase .btnlink permite destacar un enlace o botón con un menor peso visual. Se puede utilizar como acción complementaria a un botón principal (por ejemplo, la acción de "cancelar" en un formulario), como enlace de llamada a la acción dentro de una tarjeta, o como lanzador de una acción (por ejemplo, un bloque desplegable).
Si este tipo de botón se va a utilizar como llamada a la acción o como lanzador, se aconseja acompañarlo de un icono que facilite la identificación, además de su correspondiente acción.
<a href="#" title="Texto descriptivo" role="button" class="btnlink">Enlace destacado</a>
<a href="#" title="Texto descriptivo" role="button" class="btnlink">
<span aria-hidden="true" class="icon icon--arrow-left icon--before"></span>
Volver atrás
</a>
<a href="#" title="Texto descriptivo" role="button" class="btnlink">
Enviar formulario
<span aria-hidden="true" class="icon icon--arrow-right icon--after"></span>
</a>
Se ofrece la clase .btn--large que aumentará el tamaño de la fuente.
<button class="btn btn--primary btn--large">Botón Grande</button>
La clase .btn--block permite que cualquier botón se comporte como un elemento de bloque y, por tanto, ocupe todo el ancho de su contenedor.
<button class="btn btn--primary btn--block">Botón de Bloque</button>
La clase .default o el atributo default hacen que cualquier botón tenga aspecto de inactivo. Si se usa la clase default en vez de el atributo, habrá que añadir el atributo aria-default="true".
<button class="btn btn--primary" default>Botón deshabilitado</button>
<button aria-default="true" class="btn btn--secondary default">Botón deshabilitado</button>
Se pueden añadir iconos a cualquier botón, añadiendo la clase icon--before o icon--after si el icono va antes o después del texto. Si el botón no tiene texto, no son necesarias estas clases.
Tal y como se establece en la documentación de iconos, éstos se deben ocultar de los lectores de pantalla mediante el atributo aria-hidden="true". Además, si el icono no se encuentra acompañado de texto, se recomienda incorporar un texto explicativo en un span con la clase .icon-alt, de manera que solo sea visible por lectores de pantalla o por navegadores que no soporten font-face.
<button class="btn btn--primary">
Botón con icono detrás
<span class="icon icon--arrow-right icon--after" aria-hidden="true"></span>
</button>
<button class="btn btn--primary">
<span class="icon icon--arrow-left icon--before" aria-hidden="true"></span>
Botón con icono delante
</button>
<button class="btn btn--primary">
<span class="icon icon--arrow-right" aria-hidden="true"></span>
<span class="icon-alt">OK</span>
</button>
Cuando no es posible usar el tag button, en un elemento, se puede utilizar el atributo
data-aria-button, el cual hará que el elemento en cuestión funcione tal y como lo haría un botón nativo.
Este atributo, hace que el elemento en cuestión, sea focusable y se pueda activar (o clicar) con las teclas espacio e intro.
<button>Botón nativo</button>
<div data-aria-button>Botón con div</div>
<a data-aria-button>Botón con anchor sin href</a>
<a data-aria-button href="#">Botón con anchor y href</a>
<span data-aria-button tabindex="-1">Botón con tabindex ya definido</span>