Gumbi, gumbi, gumbi

Barvne gumbe je treba uporabljati samo za primarna dejanja. Za sekundarna dejanja, vključno s povezavami, uporabite navaden (bel) gumb. Posledično so vsi prej rdeči in zeleni gumbi upodobljeni modro kot druga primarna dejanja. Kateri koli od spodnjih slogov je mogoče uporabiti tudi z <button> , <input type="submit"> itd.

Primarni Sekundarni Stanovan Onemogočen

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

Če ima prvi gumb razred button-white , levi rob njegove oznake ne bo poravnan z levim robom elementov nad ali pod njim. Gumb lahko poravnate tako, da gumbu dodate razred button-unindented .

Oznaka prvega gumba ni levo poravnana s tem blokom besedila:

Gumb ena Gumb dva

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

Zdaj je oznaka prvega gumba levo poravnana s tem blokom besedila:

Gumb ena Gumb dva

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

Gumbi z ikono pred oznako

Če želite prikazati ikono pred oznako gumba, dodajte razred button-with-icon gumbu in dodajte <span class="material-icons" aria-hidden="true">icon_name</span> pred besedilno vsebino oznaka, kjer je ime_ikone ikona materialnega oblikovanja .

Primarni Sekundarni Ravno

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

Gumbi z ikono za oznako

Če želite prikazati ikono za oznako gumba, dodajte razred button-with-icon gumbu in dodajte <span class="material-icons icon-after" aria-hidden="true">icon_name</span> za besedilom vsebina oznake, kjer je icon_name ikona materialnega oblikovanja.

Primarni Sekundarni Ravni 

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