Botones

Los botones son el indicador visual principal de las acciones de un usuario.

Principios

Orientado a la acción: Los botones deben comunicar claramente que activan una acción.

Comentarios claros: La apariencia del botón debe cambiar claramente en los diferentes estados de interacción (posición del cursor, presión y enfoque) para proporcionar comentarios inmediatos.

Coherente: Todos los botones deben compartir un lenguaje visual principal para que se puedan reconocer al instante.

Flexible: El componente del botón debe adaptarse a las variaciones comunes, como incluir íconos y diferentes tamaños, sin sacrificar la coherencia.

Uso y ubicación

Un botón debe colocarse cerca de su contenido pertinente. Se pueden colocar solos o con otros componentes, como tarjetas y listas.

check_circle

Qué debes hacer

Usa la divulgación progresiva para revelar acciones menos pertinentes.

cancel

Qué no debes hacer

No abrumes la vista del usuario con demasiados botones. En su lugar, usa un grupo de botones.

check_circle

Qué debes hacer

Usa botones para solicitar una acción. También puedes usar un chip de título para un elemento estático.

cancel

Qué no debes hacer

No uses un botón como elemento decorativo estático.

Botones de ícono

Los botones de ícono están disponibles para reducir la densidad del contenido. Usa botones de ícono cuando el ícono ilustre claramente una acción. De lo contrario, incluye una etiqueta de botón.

check_circle

Qué debes hacer

Usa un botón de ícono para acciones comunes y muy reconocibles.

cancel

Qué no debes hacer

No uses un botón de ícono para acciones muy poco claras.

Conmutable

Para las acciones con estados booleanos, como favorito, hay una variante de conmutador disponible para cada tipo de botón. El intercambio de íconos entre los estados de conmutador hace que la interacción sea visible y responsiva.

check_circle

Qué debes hacer

Usa un botón de conmutador si hay opciones booleanas para una acción. Por ejemplo, iniciar o detener.

cancel

Qué no debes hacer

No uses un botón de conmutador para acciones no binarias.

Anatomía

Los botones se componen de una etiqueta y un ícono inicial o final opcional.

Los botones de ícono se componen solo de un ícono reconocible.

Ambos tienen una variante conmutable.

Personalización

Los botones contienen un estilo predeterminado y uno grande. El tamaño grande puede ayudar a enfatizar la importancia.

Los íconos se pueden usar para dar mayor énfasis, claridad y reconocimiento al botón en una posición inicial o final.