Aprendiendo Material Design Lite: Botones

Los botones forman una parte integral de cualquier sitio web funcional (además los diseñadores los aman!) Las acciones de los usuarios en la web, generalmente, comienzan y terminan cliqueando un botón. En Google Mail por ejemplo, creamos un nuevo email cliqueando el botón Compose. Es muy probable que cliquemos algunos botones más en el proceso de personalizar el email. Y finalmente, cliquearemos el botón Send para enviar el email. En esta parte de nuestra serie Aprendiendo Material Design Lite (MDL), veremos el componente Botones.

El componente de Botones en MDL es esencialmente una mejora visual de un elemento <button>, o un <a> para cumplir con la estética de Material Design. De acuerdo con la especificación, hay cuatro tipos de botones

• plano
• elevado
• flotante
• ícono

Veremos como implementar cada uno de estos y cuando cada botón funciona mejor.

Como un recordatorio, asegúrate de tener las hojas de estilo y el JavaScript de MDL configurado en el head de tu documento. Puedes personalizar el esquema de color que será aplicado a los componentes utilizando el MDL Theme builder. 

<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" />
<script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>

Una vez que está todo configurado, podemos desarrollar el componente de Botones - comenzando por el tipo plano (flat).

El Botón Plano

Crear un botón MDL es bastante directo. Podemos crear un botón tanto con un elemento button, un elemento input con un tipo submit, o una etiqueta de anclaje.

<button>Submit</button>
<!-- or -->
<input type="text" type="submit" title="Submit">
<!-- or -->
<a href="#">Submit</a>

Agrega la clase mdl-button a estos elementos para aplicar los estilos de botón MDL.

<button class="mdl-button">Submit</button>

En la demo de abajo, creamos un botón flat (plano) con el color por defecto configurado en negro.

El color del texto del botón es personalizable incluyendo alguna de las siguientes clases modificadoras.

• mdl-button--colored Agrega esta clase para aplicar el color primario en el texto del botón.
• mdl-button--accent Alternativamente agrega esta clase para aplicar el color del acento.

Refiriendo el nombre de la hoja de estilo principal (material.teal-red.min.css), nuestro color primario es "teal", mientras que "red" será aplicado como acentuación o color secundario (ingresa texto en el campo de email de abajo para ver el efecto de esos colores).

El botón flat es el tipo de botón más básico en MDL. Hará mejor su trabajo en una situación donde una acción se espera intuitivamente, como en un diálogo popup, en un componente Tarjeta, o en un formulario de Login o Sign-Up.

Debido a su apariencia, sin embargo, utilizar un botón flat dentro de un cuerpo de texto no es recomendado. El botón flat parece texto regular, como puedes ver abajo. Y como no presenta explícitamente características comunes de botón a simple vista, el botón flat no va a transmitir el affordance que la mayoría de los usuarios reconocerían como un botón cliqueable. 

Cuando el botón flat no se siente apropiado, considera utilizar un botón del tipo raised (elevado).

El Botón Elevado (Raised)

El botón elevado (raised) posee las características típicas de un botón; es cuadrado con una sombra proyectada que da el efecto de elevado. Para crear uno, comenzamos con un elemento button con la clase mdl-button aplicada.

<button class="mdl-button">Submit</button>

Luego agrega la clase mdl-button--raised al elemento. Como antes, el botón raised puede ser personalizado agregando las clases mdl-button--colored o mdl-button-accent.

<button class="mdl-button mdl-button--raised">Submit</button>
<button class="mdl-button mdl-button--raised mdl-button--colored">Submit</button>
<button class="mdl-button mdl-button--raised mdl-button--accent">Submit</button>

Aquí tenemos botones raised con los colores default, primario y el color de acento configurados como el fondo del botón.

El botón raised es prominente, lo que lo hace apropiado cuando la atención del usuario es prioritaria. Piede ser aplicado, por ejemplo, a un botón de llamado-a-la-acción en la sección principal, un botón de suscribir en un formulario de suscripción, o un botón "Comprar Ahora" en una página de producto.

Nota: ten en mente la jerarquía cuando apliques un botón raised. Utilizando un botón raised en una capa de contenido con proyección de sombras, como un diálogo de popup, puede hacer el contenido demasiado complejo con elementos peleando por atención.

Botón de Acción Flotante (FAB)

El Botón de Acción Flotante (FAB) fue reconocido como el elemento firma de Material Design. El FAB es un botón circular con un ícono flotando en una página. El propósito de un FAB es parecido a un botón llamado-a-la-acción; enfatiza una acción que la mayoría de los usuarios -presumiblemente- realizaría. Usualmente se presenta con un color vívido que lo hace más prominente entre el resto de los elementos de UI de la página.

Una vez más, comenzamos un Botón de Acción Flotante con un elemento button vacío con la clase mdl-button. Esta vez, en lugar de texto, incluiremos un ícono dentro del botón. Consulta la guía de íconos de Material Design para seleccionar el nombre del ícono a mostrar. 

<button class="mdl-button"><i class="material-icons">mode_edit</i></button>

Para convertir el botón en un FAB, agregamos la clase mdl-button--fab, adicionalmente con mdl-button--colored para modificar el color del fondo.

<button class="mdl-button mdl-button--fab mdl-button--colored">Submit</button>

Como puedes ver abajo, el botón FAB toma el color del accent cuando se configura en un botón coloreado, en oposición al color primario, como vimos con los botones flat y raised.

MDL aplica el color primario al componente más "coloreado", como la navegación, las tabs, los campos de texto, sliders y checkboxes, lo que lo hace absolutamente dominante. El FAB debe ser más prominente que el resto del UI, por eso toma el color del acento por defecto.

En cualquier caso cuando el color primario resulta ser más apto, puedes agregar la clase mdl-button--primary en su lugar.

<button class="mdl-button mdl-button--fab mdl-button--primary">Submit</button>

Aquí está con el color primario:

Botón ícono

A diferencia del FAB, ícono no tiene la forma de un círculo; aparece simplemente como un ícono. Un botón ícono es útil cuando el espacio es limitado, o es suficiente para representar el propósito del botón ya que los usuarios están acostumbrados a la aplicación. Toma la barra de herramientas de Google Docs como ejemplo:

Utilizando un botón textual en la barra de herramientas en este caso sería inimaginable. 

El botón ícono se forma mediante la combinación de las clases mdl-button y mdl-button--icon:

<button class="mdl-button mdl-button--icon">
  <i class="material-icons">backup</i>
</button>

Este ejemplo muestra un ícono que ilustra la funcionalidad de upload o backup:

El Efecto de Botón Ripple

Además, estos botones pueden ser mejorados con el efecto ripple. El efecto ripple es otra de las firmas visuales de Material Design y provee retroalimentación visual de que el botón fue cliqueado. El efecto comienza en la coordenada donde el click fue hecho, replicando como el efecto funciona en la vida real.

Esta mejora viene mediante dos clases: mdl-js-button y mdl-js-ripple-effect que puede ser aplicada a cualquier tipo de botón MDL.

Agrega estas dos clases al botón:

<button class="mdl-button mdl-js-button mdl-js-ripple-effect">Save</button>

y el efecto ripple debería estar aplicado:

Botones Inactivos

En algunos casos, como cuando un campo de texto requerido sigue vacío, o una opción particular todavía debe ser seleccionada, el botón de la acción puede ser mejor que esté desactivado. Para deshabilitar los botones MDL, agrega el atributo booleano de HTML disabled al elemento botón:

<button class="mdl-button" disabled>Send</button>

El botón ahora no debe responder a la interacción con el usuario (el efecto ripple también se deshabilitará). Agregando las clases de modificación de color mdl-button--colored o mdl-button--accent, tampoco afectarán los botones deshabilitados. 

El atributo disabled, a pesar de no ser HTML válido, también es aplicable a botones creados con la etiqueta anchor.

Redondeando

Los botones son bastante simples de implementar. Podemos construir botones de bonito estilo, con una suave animación de efecto ripple, con solo un par de clases. Personalmente, espero que el componente sea mejorado tomando como inspiración el componente de Botón de Bootstrap, mediante quizás la inclusión de la variante de Grupo de Botones.

En la próxima entrega de esta serie, veremos el componente de Campo de Texto, con el que ya nos encontramos un par de veces.

Hasta la próxima!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!