Tlačítka

Barevná tlačítka by se měla používat pouze pro primární akce. Pro sekundární akce, včetně odkazů, použijte obyčejné (bílé) tlačítko. V důsledku toho jsou všechna dříve červená a zelená tlačítka vykreslena modře jako ostatní primární akce. Jakýkoli z níže uvedených stylů lze také použít s <button> , <input type="submit"> a tak dále.

Primární Sekundární Ploché Zakázáno

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

Pokud má první tlačítko třídu button-white , levý okraj jeho štítku nebude zarovnán s levým okrajem prvků nad nebo pod ním. Tlačítko můžete zarovnat tak, že k tlačítku přidáte třídu button-unindented .

Popisek prvního tlačítka není zarovnán doleva s tímto blokem textu:

Tlačítko jedna Tlačítko dva

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

Nyní je popisek prvního tlačítka zarovnán doleva s tímto blokem textu:

Tlačítko jedna Tlačítko dva

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

Tlačítka s ikonou před štítkem

Chcete-li zobrazit ikonu před popiskem tlačítka, přidejte do tlačítka třídu button-with-icon a přidejte <span class="material-icons" aria-hidden="true">icon_name</span> před textový obsah label, kde icon_name je ikona Material Design .

Primární Sekundární 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čítka s ikonou za štítkem

Chcete-li zobrazit ikonu za štítkem tlačítka, přidejte do tlačítka třídu button-with-icon a za text přidejte <span class="material-icons icon-after" aria-hidden="true">icon_name</span> obsah štítku, kde icon_name je ikona Material Design.

Primární Sekundární 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>