Knappar

Färgade knappar ska endast användas för primära åtgärder. För sekundära åtgärder, inklusive länkar, använd en vanlig (vit) knapp. Följaktligen renderas alla tidigare röda och gröna knappar i blått som andra primära åtgärder. Vilken som helst av stilarna nedan kan också användas med <button> , <input type="submit"> och så vidare.

Primär sekundär lägenhet inaktiverad

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

Om den första knappen har klassen button-white , kommer den vänstra kanten av dess etikett inte att justeras med den vänstra kanten av element ovanför eller under den. Du kan dra knappen i linje genom att också lägga till en button-unindented i knappen.

Den första knappens etikett är inte vänsterjusterad med detta textblock:

Knapp ett Knapp två

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

Nu är den första knappens etikett vänsterjusterad med detta textblock:

Knapp ett Knapp två

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

Knappar med en ikon före etiketten

För att visa en ikon före knappens etikett, lägg till klassen button-with-icon i knappen och lägg till <span class="material-icons" aria-hidden="true">icon_name</span> före textinnehållet i etikett, där ikonnamn är en materialdesignikon .

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>

Knappar med en ikon efter etiketten

För att visa en ikon efter knappens etikett, lägg till klassen button-with-icon till knappen och lägg till <span class="material-icons icon-after" aria-hidden="true">icon_name</span> efter texten innehållet i etiketten, där icon_name är en materialdesignikon.

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>