Los botones ayudan a los usuarios a iniciar acciones o fluir. Elige entre diferentes tipos de botones para informar el énfasis.
Recursos
| Tipo | Vínculo | Estado |
|---|---|---|
| Diseño | Fuente del diseño (Figma) | Disponible |
| Implementación | Jetpack Compose | Disponible |
Lo más destacado
- Elige el tipo de botón según la importancia de la acción. Cuanto más importante sea la acción, más énfasis se pondrá en el botón.
- Los botones deben tener etiquetas claras para indicar la acción que realizan.
- Coloca los botones de manera lógica en la pantalla, donde es probable que los usuarios esperen encontrarlos.
- No uses los botones en exceso. Cuando hay demasiados botones en una pantalla, se interrumpe la jerarquía visual.
Variantes
Hay seis tipos de botones:
- Botón con relleno
- Botón con contorno
- Botón de ícono
- Botón del ícono de esquema
- Botón largo
- Botón de imagen
Elige el tipo de botón según la importancia de la acción. Cuanto más importante sea la acción, más énfasis debe tener el botón.
Botón con relleno y contorno
Los botones rellenos tienen el mayor impacto visual y deben usarse para acciones importantes y finales que completen un flujo, como Guardar, Unirse ahora, Confirmar o Descargar.
Los botones con contorno son botones de énfasis medio. Contienen acciones que son importantes, pero no son la acción principal de una app. Los botones con contorno se combinan bien con los botones rellenos para indicar una acción secundaria alternativa.
Anatomía
- Contenedor
- Texto de la etiqueta
- Ícono (opcional)
Estados
Representación visual del estado de un componente.
- Predeterminada
- Enfoque
- Presionados
Especificación
Botón de ícono y ícono de contorno
Usa botones de íconos para mostrar acciones en un diseño compacto. Los botones de íconos pueden representar acciones de apertura, como abrir un menú ampliado o una búsqueda, o representar acciones binarias que se pueden activar y desactivar, como marcar favoritos o agregar a favoritos. También se usan para reproducir o pausar contenido multimedia.
Los botones de íconos se pueden definir en tres tamaños: pequeño, mediano y grande.
Anatomía
- Contenedor
- Ícono
Estados
- Predeterminada
- Enfoque
- Presionados
Los estados son representaciones visuales que se usan para comunicar el estado de un componente o elemento interactivo.
Especificaciones
Botón ancho
Los botones anchos se usan para un énfasis más alto que el habitual. Contienen acciones que son importantes. Los botones que representan opciones relacionadas se agrupan. El grupo debe compartir una plataforma común.
Anatomía
- Contenedor
- Ícono inicial
- Títulos
- Subtítulo
Estados
- Predeterminada
- Enfoque
- Presionados
Los estados son representaciones visuales que se usan para comunicar el estado de un componente o elemento interactivo.
Especificaciones
Botón de imagen
Los botones de imagen suelen usarse para mostrar miniaturas del contenido que está disponible en el siguiente nivel de navegación. Por lo general, se agrupan con acciones relacionadas y el grupo debe compartir una plataforma común.
Anatomía
- Contenedor
- Ícono inicial
- Títulos
- Subtítulo
- Capa de imagen, que consiste en lo siguiente:
- Scrim (superposición de estado)
- Gradiente (según el color de la superficie)
- Imagen
Estados
- Predeterminada
- Enfoque
- Presionados
Los estados son representaciones visuales que se usan para comunicar el estado de un componente o elemento interactivo.
Especificaciones
Uso
Los botones generalmente se usan para comunicar acciones que un usuario puede realizar. Con frecuencia, se encuentran en elementos de la IU, como diálogos, ventanas modales, formularios, tarjetas y barras de herramientas.
Los botones son solo una opción para representar acciones en tu IU. No las utilices demasiado. Tener demasiados botones en una pantalla interrumpe la jerarquía visual.
- Contenedor
- Ícono
- Texto de la etiqueta
- Títulos
- Subtítulo
- Imagen
Contenedor
Los botones muestran un contenedor alrededor del contenido. El contenedor escala 1.1 veces en el enfoque y mantiene el padding interno. Estas son algunas consideraciones para los contenedores:
- Establece el ancho del contenedor en función del contenido con padding coherente.
- Establece la posición relativa del contenedor en la cuadrícula de diseño responsivo.
- Usa contenedores de colores sólidos para botones con relleno.
- Usa color de trazo y relleno en el enfoque para los botones con contorno. Cuando se enfoca, el contenedor obtiene un color de relleno junto con el contorno.
- Para los botones de imagen y ancho, el ancho del contenedor se configura de acuerdo con la cuadrícula de diseño.
- El tamaño, la posición y la alineación del contenedor pueden cambiar a medida que se escala su contenedor superior.
Los contenedores de botones de texto y de íconos tienen esquinas completamente redondeadas. Los contenedores anchos y de botones de imagen tienen contenedores redondeados de 12 dp.
Qué debes hacer
Precaución
Ícono
Los íconos comunican visualmente la acción del botón y ayudan a llamar la atención. Deben colocarse en la parte frontal del botón. Los íconos siempre están centrados verticalmente dentro del contenedor.
Qué debes hacer
Qué no debes hacer
Precaución
Texto de la etiqueta
El texto de la etiqueta es el elemento más importante de un botón. Describe la acción que ocurre cuando un usuario presiona un botón.
Usa mayúscula inicial para el texto de la etiqueta del botón, con mayúsculas en la primera palabra y los sustantivos propios. Evita ajustar el texto. Para lograr la máxima legibilidad, el texto de la etiqueta debe permanecer en una sola línea.
Qué debes hacer
Precaución
Imagen
Los botones de imagen siempre tienen una superposición con gradiente y una lámina sobre la imagen en el fondo. La superposición de gradientes se configura según el color del contenedor. La lámina cambia según el estado.
Grupos de botones
Los botones aparecen juntos en una fila o columna para mantener una navegación coherente entre acciones. En las siguientes secciones, se describen las consideraciones.
Informa a la jerarquía
Cada pantalla debe tener una acción principal representada por un botón destacado, generalmente ancho. El botón debe ser más fácil de ver y comprender. Otros botones deben ser menos prominentes y no deben distraer a los usuarios de la acción principal.
El primer botón del grupo actúa como la acción principal, ya que el enfoque llega primero a él.
Mantener el diseño lineal
- Diseño de la fila
- Diseño de la columna
Usa variantes de forma lógica
En el diseño de columna, se deben mantener las variantes de un solo botón. En el diseño de filas, las diferentes variantes se pueden agrupar en un grupo de botones, pero la lógica debe ser clara. Los botones con relleno y de contorno se pueden usar en el mismo grupo, pero garantizan una jerarquía clara para las acciones.
Qué debes hacer
Qué no debes hacer
Precaución
