Бутони

Цветните бутони трябва да се използват само за основни действия. За вторични действия, включително връзки, използвайте обикновен (бял) бутон. Следователно всички предишни червени и зелени бутони се изобразяват в синьо като други основни действия. Всеки от стиловете по-долу може да се използва и с <button> , <input type="submit"> и т.н.

Основно вторично плоско забранено

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

Ако първият бутон има класа button-white , левият ръб на етикета му няма да бъде подравнен с левия ръб на елементите над или под него. Можете да изтеглите бутона в подравняване, като добавите и клас button-unindented към бутона.

Етикетът на първия бутон не се подравнява вляво с този блок от текст:

Бутон едно Бутон две

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

Сега етикетът на първия бутон се подравнява вляво с този блок от текст:

Бутон едно Бутон две

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

Бутони с икона преди етикета

За да покажете икона преди етикета на бутона, добавете класа button-with-icon към бутона и добавете <span class="material-icons" aria-hidden="true">icon_name</span> преди текстовото съдържание на label, където icon_name е икона на 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>

Бутони с икона след етикета

За да покажете икона след етикета на бутона, добавете класа button-with-icon към бутона и добавете <span class="material-icons icon-after" aria-hidden="true">icon_name</span> след текста съдържание на етикета, където icon_name е икона на 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>