Les boutons de couleur ne doivent être utilisés que pour les actions principales. Pour les actions secondaires, y compris les liens, utilisez un bouton simple (blanc). Par conséquent, tous les boutons précédemment rouges et verts sont affichés en bleu, comme les autres actions principales. N'importe lequel des styles ci-dessous peut également être utilisé avec <button>, <input type="submit">, etc.
Principal Secondaire Plat Désactivé
<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 le premier bouton possède la classe button-white, le bord gauche de son libellé ne sera pas aligné sur le bord gauche des éléments situés au-dessus ou en dessous. Vous pouvez aligner le bouton en ajoutant également une classe button-unindented.
Le libellé du premier bouton n'est pas aligné à gauche de ce bloc de texte:
<a class="button button-white" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Le libellé du premier bouton est maintenant aligné à gauche avec ce bloc de texte:
<a class="button button-white button-unindented" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Boutons avec une icône avant le libellé
Pour afficher une icône avant le libellé du bouton, ajoutez la classe button-with-icon au bouton et <span class="material-icons" aria-hidden="true">icon_name</span> avant le contenu textuel du libellé, où icon_name est une icône 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>
Boutons avec une icône après le libellé
Pour afficher une icône après le libellé du bouton, ajoutez la classe button-with-icon au bouton et ajoutez <span class="material-icons icon-after" aria-hidden="true">icon_name</span> après le contenu textuel du libellé, où icon_name est une icône 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>