Knapper

Fargede knapper skal bare brukes til primærhandlinger. For sekundære handlinger, inkludert lenker, bruk en vanlig (hvit) knapp. Følgelig er alle de tidligere røde og grønne knappene gjengitt i blått som andre primære handlinger. Hvilken som helst av stilene nedenfor kan også brukes med <button> , <input type="submit"> , og så videre.

Primær sekundær leilighet deaktivert

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

Hvis den første knappen har klassen button-white , vil ikke venstre kant av etiketten være justert med venstre kant av elementer over eller under den. Du kan trekke knappen inn i justering ved også å legge til en button-unindented i knappen.

Den første knappens etikett er ikke venstrejustert med denne tekstblokken:

Knapp en Knapp to

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

Nå venstrejusteres den første knappens etikett med denne tekstblokken:

Knapp en Knapp to

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

Knapper med et ikon foran etiketten

For å vise et ikon foran knappens etikett, legg til button-with-icon klassen til knappen og legg til <span class="material-icons" aria-hidden="true">icon_name</span> før tekstinnholdet i label, der ikonnavn er et Material Design-ikon .

Primær Sekundær Flat

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

Knapper med et ikon etter etiketten

For å vise et ikon etter knappens etikett, legg til button-with-icon klassen til knappen og legg til <span class="material-icons icon-after" aria-hidden="true">icon_name</span> etter teksten innholdet på etiketten, der icon_name er et ikon for materialdesign.

Primær Sekundær Flat 

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