Buttons

Buttons

En la aplicación usamos los botones como “call to action” reiterativos y que se pueden presentar de diferentes maneras según el uso, la posición y la importancia de éstos.

Componente

Para aplicar un estilo u otro tenemos que tener en cuenta la relevancia del botón, y la colocación en pantalla. Para solucionar este tipo de posibles enfrentamientos tenemos varios botones que hay que elegir según donde van a ir colocados.

Primary button: Este estilo se tiene que usar siempre y cuando la pantalla esté sobresaturada de texto y el botón flat no destaque por encima del resto de elementos.

Secondary button: Este botón lo usaremos cómo botón primario de la aplicación exceptuando los casos donde hay que usar un “Raised button” por temás de legibilidad o de importancia.

Primary buttons single width
Secondary buttons single width

Tipología

Los botones pueden ser de dos tipos:

Full width: El ancho de este botón va de lado a lado del componente que lo contiene. Este tipo de construcción puede dividirse por la mitad para los casos donde tengamos dos acciones y las dos tengan la misma relevancia, por ejemplo en un caso de “aceptar” y “cancelar”. Estas dos opciones tienen que estar en la misma linea y por eso se divide el botón en dos.

Single witdh: El ancho de este botón está adaptado a lo que ocupe el texto, el botón medirá de ancho lo mismo que ocupe el texto respetando la construcción que se muestra en el ejemplo superior.

Full widht: Primary buttons @1x
Full widht: Secondary buttons @1x