Acciones

Botones

Los botones permiten al usuario ejecutar acciones.

Uso

La clase button se aplica sobre un button nativo, o sobre un a cuando la acción es navegar — un enlace con apariencia de botón.

Es necesario acompañarla de la clase del nivel de importancia: primary, secondary o tertiary.

Nivel primario y secundario

En un conjunto de acciones relacionadas, el botón primario es la acción principal, y va la primera. Las demás llevan el nivel secundario. Cuando solo hay una acción posible, es primaria.

<div class="button-group">
    <button class="button primary">Pagar factura</button>
    <a class="button secondary" href="/invoice/123/pdf">Descargar en PDF</a>
    <button class="button secondary">Enviar por email</button>
</div>

Nivel terciario

El nivel terciario es para acciones de menor importancia, que no deben destacar.

<button class="button tertiary">Aplicar</button>

Tamaño compacto

La clase compact reduce la altura del botón (46px en vez de 61px). Un botón compacto nunca debe ser la acción primaria de la pantalla.

<div class="button-group">
    <button class="button primary compact">Guardar</button>
    <button class="button secondary compact">Cancelar</button>
</div>

Tono de peligro

La clase danger se superpone a cualquier nivel para acciones destructivas. La combinación primary danger queda reservada a la confirmación dentro de un modal; en el resto de la interfaz, una acción destructiva llega como mucho al nivel secundario. El texto del botón nombra la consecuencia («Eliminar los 3 backups»), nunca un genérico «Aceptar».

<div class="button-group">
    <button class="button primary danger">Eliminar los 3 backups</button>
    <button class="button secondary danger">Eliminar dominio</button>
    <button class="button tertiary danger">Cancelar suscripción</button>
</div>

Solo icono

La clase icon fuerza una proporción 1:1. Un botón de solo icono nunca debe ser la acción primaria de la pantalla.

<button class="button secondary icon"><vadavo-icon name="bell"></vadavo-icon></button>

Estado de carga

La clase loading dibuja junto a la etiqueta el anillo giratorio que indica que la acción sigue en marcha; el atenuado y la retirada de la sombra los trae disabled. El texto pasa a un gerundio («Guardando…») en vez de ocultarse, y el botón se ensancha o se estrecha con una transición para acompañar ese cambio.

<button class="button primary loading" disabled>Guardando…</button>

Sobre fondo de marca

Dentro de un contenedor con la clase spotlight, el nivel primario toma el --action--background--primary que fija esa superficie, para mantener el contraste sobre ella (ver Arquitectura).

<div class="spotlight" style="padding:24px;border-radius:var(--surface--radius--container)">
    <button class="button primary">Empezar ahora</button>
</div>

Botones desactivados

El atributo disabled de button atenúa el botón al 45% y le quita la sombra, para que no se lea como accionable.

<div class="button-group">
    <button class="button primary" disabled>Pagar ahora</button>
    <button class="button secondary" disabled>Enviar por email</button>
</div>

Tokens semánticos