Toetsen

Gekleurde knoppen mogen alleen worden gebruikt voor primaire acties. Gebruik voor secundaire acties, inclusief links, een gewone (witte) knop. Bijgevolg worden alle voorheen rode en groene knoppen blauw weergegeven, net als andere primaire acties. Elk van de onderstaande stijlen kan ook worden gebruikt met <button> , <input type="submit"> , enzovoort.

Primaire secundaire flat uitgeschakeld

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

Als de eerste knop de klasse button-white heeft, wordt de linkerrand van het label niet uitgelijnd met de linkerrand van de elementen erboven of eronder. U kunt de knop uitlijnen door ook een klasse button-unindented aan de knop toe te voegen.

Het label van de eerste knop is niet links uitgelijnd met dit tekstblok:

Knop één Knop twee

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

Nu wordt het label van de eerste knop links uitgelijnd met dit tekstblok:

Knop één Knop twee

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

Knoppen met een pictogram vóór het label

Om een ​​pictogram vóór het label van de knop weer te geven, voegt u de klasse button-with-icon toe aan de knop en voegt u <span class="material-icons" aria-hidden="true">icon_name</span> toe vóór de tekstinhoud van de knop label, waarbij icon_name een Material Design-pictogram is.

primair toe secundair toe plat toe

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

Knoppen met een pictogram achter het label

Om een ​​pictogram na het label van de knop weer te geven, voegt u de klasse button-with-icon toe aan de knop en voegt u <span class="material-icons icon-after" aria-hidden="true">icon_name</span> toe na de tekst inhoud van het label, waarbij icon_name een Material Design-pictogram is.

Primaire Secundaire Platte 

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