Os botões coloridos devem ser usados apenas para ações principais. Para ações secundárias, incluindo links, use um botão simples (branco). Consequentemente, todos os botões que antes eram vermelhos e verdes são renderizados em azul, como outras ações principais. Qualquer um dos estilos abaixo também pode ser usado com <button>, <input type="submit"> e assim por diante.
Principal Secundário Plano Desativado
<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>
Se o primeiro botão tiver a classe button-white, a borda esquerda do rótulo dele não será alinhada com a borda esquerda dos elementos acima ou abaixo dele. Você pode alinhar o botão adicionando uma classe button-unindented a ele.
O rótulo do primeiro botão não está alinhado à esquerda com este bloco de texto:
<a class="button button-white" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Agora, o rótulo do primeiro botão está alinhado à esquerda com este bloco de texto:
<a class="button button-white button-unindented" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Botões com um ícone antes do rótulo
Para mostrar um ícone antes do rótulo do botão, adicione a classe button-with-icon ao botão e <span class="material-icons" aria-hidden="true">icon_name</span> antes do conteúdo de texto do rótulo, em que icon_name é um ícone do 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>
Botões com um ícone após o rótulo
Para mostrar um ícone após o rótulo do botão, adicione a classe button-with-icon ao botão e <span class="material-icons icon-after" aria-hidden="true">icon_name</span> após o conteúdo de texto do rótulo, em que icon_name é um ícone do 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>