Los botones son el principal indicador visual de las acciones del usuario.
Principios
Orientados a la acción: Los botones deben comunicar claramente que activan una acción.
Comentarios claros: La apariencia del botón debe cambiar de forma clara en los diferentes estados de interacción (desplazamiento, presión, enfoque) para proporcionar comentarios inmediatos.
Uniformes: Todos los botones deben compartir un lenguaje visual principal para que se los reconozca al instante.
Flexible: El componente de botón debe admitir variaciones comunes, como incluir íconos y diferentes tamaños, sin sacrificar la coherencia.
Uso y posición
Un botón debe colocarse cerca de su contenido pertinente. Se pueden colocar solos o con otros componentes, como tarjetas y listas.
Qué debes hacer
Qué no debes hacer
Qué debes hacer
Qué no debes hacer
Anatomía
Predeterminado
1. Habilitado: Es el estado predeterminado.
2. Desplazamiento del cursor
3. Presionar
Grande
1. Habilitado: Es el estado predeterminado.
2. Desplazamiento del cursor
3. Presionar
Personalización
Los botones contienen una variación predeterminada y una grande, junto con estados predeterminados, enfocados y presionados para cada uno. Los íconos se pueden usar para dar mayor énfasis, claridad y reconocimiento al botón. El tamaño del botón puede ayudar a enfatizar la importancia.
Predeterminado
| Propiedades | Personalización | Configuración predeterminada |
|---|---|---|
| Forma | Sí | Grande, circular |
| Padding | Sí | 16 dp, 8 dp |
| Borde | Sí | 2 dp, #606460 |
| Texto | Sí | Cuerpo pequeño |
| Ícono inicial | Sí | 40 dp |
| Ícono final | Sí | 40 dp |
| Tamaño | Sí | Altura mínima de 56 dp |
| Profundidad | Sí | 0 |
Grande
| Propiedades | Personalización | Configuración predeterminada |
|---|---|---|
| Forma | Sí | Grande, circular |
| Padding | Sí | 20 dp, 8 dp |
| Borde | Sí | 2 dp, #606460 |
| Texto | Sí | Cuerpo pequeño |
| Ícono inicial | Sí | 56 dp |
| Ícono final | Sí | 56 dp |
| Tamaño | Sí | Altura mínima de 72 dp |
| Profundidad | Sí | 0 |
| Superficie | No |