Pogas

Krāsainās pogas jāizmanto tikai primārajām darbībām. Sekundārām darbībām, tostarp saitēm, izmantojiet vienkāršu (baltu) pogu. Līdz ar to visas iepriekš sarkanās un zaļās pogas tiek atveidotas zilā krāsā tāpat kā citas primārās darbības. Jebkuru no tālāk norādītajiem stiliem var izmantot arī ar <button> , <input type="submit"> un tā tālāk.

Primārais sekundārais dzīvoklis ir invalīds

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

Ja pirmajai pogai ir button-white klase, tās etiķetes kreisā mala netiks līdzināta ar elementu kreiso malu virs vai zem tās. Varat izvilkt pogu līdzinājumā, pievienojot pogai klasi button-unindented .

Pirmās pogas etiķete netiek līdzināta pa kreisi ar šo teksta bloku:

Poga viena Otrā poga

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

Tagad pirmās pogas etiķete tiek līdzināta pa kreisi ar šo teksta bloku:

Poga viena Otrā poga

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

Pogas ar ikonu pirms etiķetes

Lai pirms pogas iezīmes tiktu parādīta ikona, pievienojiet pogai klasi button-with-icon un pirms pogas teksta satura pievienojiet <span class="material-icons" aria-hidden="true">icon_name</span> etiķete, kur ikonas_nosaukums ir materiāla dizaina ikona .

Primārā Sekundārā Dzīvoklis

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

Pogas ar ikonu aiz etiķetes

Lai aiz pogas iezīmes tiktu rādīta ikona, pievienojiet button-with-icon un pēc teksta pievienojiet <span class="material-icons icon-after" aria-hidden="true">icon_name</span> etiķetes saturs, kur icon_name ir materiāla dizaina ikona.

Primārā Sekundārā Plakanā 

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