Knapper

Farvede knapper bør kun bruges til primære handlinger. Til sekundære handlinger, herunder links, skal du bruge en almindelig (hvid) knap. Derfor er alle de tidligere røde og grønne knapper gengivet i blåt ligesom andre primære handlinger. Enhver af stilene nedenfor kan også bruges med <button> , <input type="submit"> og så videre.

Primær sekundær lejlighed handicappet

<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 knap har klassen button-white , vil venstre kant af dens etiket ikke være justeret med venstre kant af elementer over eller under den. Du kan trække knappen på linje ved også at tilføje en button-unindented til knappen.

Den første knaps etiket er ikke venstrejusteret med denne tekstblok:

Knap en Knap to

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

Nu venstrejusteres den første knaps etiket med denne tekstblok:

Knap en Knap 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 før etiketten

For at få vist et ikon før knappens etiket skal du tilføje button-with-icon klassen til knappen og tilføje <span class="material-icons" aria-hidden="true">icon_name</span> før tekstindholdet i label, hvor ikonnavn er et Material Design-ikon .

Primær Sekundær flad

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

For at få vist et ikon efter knappens etiket skal du tilføje klassen button-with-icon til knappen og tilføje <span class="material-icons icon-after" aria-hidden="true">icon_name</span> efter teksten indholdet af etiketten, hvor icon_name er et Material Design-ikon.

Primær Sekundær Flad 

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