Дугмад, Дугмад, Дугмад

Дугмад у боји треба да се користе само за примарне радње. За секундарне радње, укључујући везе, користите обично (бело) дугме. Сходно томе, сва некадашња црвена и зелена дугмад су приказана плавом бојом као и друге примарне радње. Било који од стилова испод се такође може користити са <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> пре текстуалног садржаја лабел, где је ицон_наме икона дизајна материјала .

Примарни Секундарни Стан

<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 икона дизајна материјала.

Примарни Секундарни адд

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