I pulsanti colorati devono essere utilizzati solo per le azioni principali. Per le azioni secondarie, inclusi i link, utilizza un pulsante normale (bianco). Di conseguenza, tutti i pulsanti precedentemente rossi e verdi vengono visualizzati in blu come le altre azioni principali. Qualsiasi stile riportato di seguito può essere utilizzato anche con <button>, <input type="submit"> e così via.
Principale Secondario Flat Disattivato
<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 il primo pulsante ha la classe button-white, il bordo sinistro dell'etichetta non sarà allineato al bordo sinistro degli elementi sopra o sotto. Puoi allineare il pulsante aggiungendo anche una classe button-unindented al pulsante.
L'etichetta del primo pulsante non è allineata a sinistra con questo blocco di testo:
<a class="button button-white" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Ora l'etichetta del primo pulsante è allineata a sinistra con questo blocco di testo:
<a class="button button-white button-unindented" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Pulsanti con un'icona prima dell'etichetta
Per visualizzare un'icona prima dell'etichetta del pulsante, aggiungi la classe button-with-icon al pulsante e <span class="material-icons" aria-hidden="true">icon_name</span> prima del contenuto di testo dell'etichetta, dove icon_name è un'icona Material Design.
Principale Secondario Appartamento
<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>
Pulsanti con un'icona dopo l'etichetta
Per visualizzare un'icona dopo l'etichetta del pulsante, aggiungi la classe button-with-icon al pulsante e <span class="material-icons icon-after" aria-hidden="true">icon_name</span> dopo il contenuto di testo dell'etichetta, dove icon_name è un'icona 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>