Botons, botons, botons

Els botons de colors només s'han d'utilitzar per a accions primàries. Per a accions secundàries, inclosos els enllaços, utilitzeu un botó normal (blanc). En conseqüència, tots els botons anteriorment vermells i verds es representen en blau com altres accions primàries. Qualsevol dels estils següents també es pot utilitzar amb <button> , <input type="submit"> i així successivament.

Primària Secundària Pis Discapacitat

<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ó té la classe button-white , la vora esquerra de la seva etiqueta no s'alinearà amb la vora esquerra dels elements a sobre o a sota. Podeu estirar el botó per alinear-lo afegint també una classe button-unindented al botó.

L'etiqueta del primer botó no s'alinea a l'esquerra amb aquest bloc de text:

Botó un Botó dos

<a class="button button-white" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>

Ara l'etiqueta del primer botó s'alinea a l'esquerra amb aquest bloc de text:

Botó un Botó dos

<a class="button button-white button-unindented" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>

Botons amb una icona abans de l'etiqueta

Per mostrar una icona abans de l'etiqueta del botó, afegiu la classe button-with-icon al botó i afegiu <span class="material-icons" aria-hidden="true">icon_name</span> abans del contingut de text del etiqueta, on icon_name és una icona de Material Design .

Primària Secundària Pis

<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>

Botons amb una icona després de l'etiqueta

Per mostrar una icona després de l'etiqueta del botó, afegiu la classe button-with-icon al botó i afegiu <span class="material-icons icon-after" aria-hidden="true">icon_name</span> després del text contingut de l'etiqueta, on icon_name és una icona de Material Design.

Primari secundària plana

<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>