Los botones de color solo deben usarse para acciones principales. Para las acciones secundarias, incluidos los vínculos, usa un botón simple (blanco). Por lo tanto, todos los botones que antes eran rojos y verdes se renderizan en azul, como otras acciones principales. Cualquiera de los siguientes estilos también se puede usar con <button>, <input type="submit">, etcétera.
Principal Secundario Plana Inhabilitada
<a class="button button-primary" href="#buttons">Primary</a>
<a class="button" href="#buttons">Secondary</a>
<a class="button button-white" href="#buttons">Flat</a>
<a class="button button-disabled" href="#buttons">Disabled</a>
Si el primer botón tiene la clase button-white, el borde izquierdo de su etiqueta no se alineará con el borde izquierdo de los elementos que se encuentran arriba o debajo de él. Para alinear el botón, también puedes agregarle una clase button-unindented.
La etiqueta del primer botón no se alinea a la izquierda con este bloque de texto:
<a class="button button-white" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Ahora, la etiqueta del primer botón se alinea a la izquierda con este bloque de texto:
<a class="button button-white button-unindented" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Botones con un ícono antes de la etiqueta
Para mostrar un ícono antes de la etiqueta del botón, agrega la clase button-with-icon al botón y agrega <span class="material-icons" aria-hidden="true">icon_name</span> antes del contenido de texto de la etiqueta, donde icon_name es un ícono de Material Design.
<a class="button button-with-icon button-primary" href="#buttons">
<span class="material-icons" aria-hidden="true">add</span>Primary
</a>
<a class="button button-with-icon" href="#buttons">
<span class="material-icons" aria-hidden="true">add</span>Secondary
</a>
<a class="button button-with-icon button-white" href="#buttons">
<span class="material-icons" aria-hidden="true">add</span>Flat
</a>
Botones con un ícono después de la etiqueta
Para mostrar un ícono después de la etiqueta del botón, agrega la clase button-with-icon al botón y agrega <span class="material-icons icon-after" aria-hidden="true">icon_name</span> después del contenido de texto de la etiqueta, donde icon_name es un ícono de Material Design.
<a class="button button-with-icon button-primary" href="#buttons">
Primary<span class="material-icons icon-after" aria-hidden="true">arrow_forward</span>
</a>
<a class="button button-with-icon" href="#buttons">
Secondary<span class="material-icons icon-after" aria-hidden="true">arrow_forward</span>
</a>
<a class="button button-with-icon button-white" href="#buttons">
Flat<span class="material-icons icon-after" aria-hidden="true">arrow_forward</span>
</a>