Tlačidlá

Farebné tlačidlá by sa mali používať iba na primárne akcie. Pre sekundárne akcie vrátane odkazov použite obyčajné (biele) tlačidlo. V dôsledku toho sú všetky predtým červené a zelené tlačidlá vykreslené modrou farbou ako ostatné primárne akcie. Ktorýkoľvek zo štýlov nižšie je možné použiť aj s <button> , <input type="submit"> a tak ďalej.

Primárne Sekundárne Ploché Zakázané

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

Ak má prvé tlačidlo triedu button-white , ľavý okraj jeho označenia nebude zarovnaný s ľavým okrajom prvkov nad alebo pod ním. Tlačidlo môžete zarovnať tak, že k tlačidlu pridáte aj triedu button-unindented .

Menovka prvého tlačidla nie je zarovnaná doľava s týmto blokom textu:

Tlačidlo jedna Tlačidlo dva

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

Teraz je štítok prvého tlačidla zarovnaný doľava s týmto blokom textu:

Tlačidlo jedna Tlačidlo dva

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

Tlačidlá s ikonou pred štítkom

Ak chcete zobraziť ikonu pred menovkou tlačidla, pridajte do tlačidla triedu button-with-icon a pridajte <span class="material-icons" aria-hidden="true">icon_name</span> pred textový obsah label, kde icon_name je ikona Material Design .

Primárne Sekundárne Ploché

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

Tlačidlá s ikonou za štítkom

Ak chcete zobraziť ikonu za štítkom tlačidla, pridajte do tlačidla triedu button-with-icon a za text pridajte <span class="material-icons icon-after" aria-hidden="true">icon_name</span> obsah štítku, kde icon_name je ikona Material Design.

Primárna Sekundárne Ploché 

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