Farbige Schaltflächen sollten nur für primäre Aktionen verwendet werden. Verwenden Sie für sekundäre Aktionen, einschließlich Links, eine einfache (weiße) Schaltfläche. Daher werden alle zuvor roten und grünen Schaltflächen wie andere primäre Aktionen blau dargestellt. Alle unten aufgeführten Stile können auch mit <button>, <input type="submit"> usw. verwendet werden.
Primär Sekundär Flach Deaktiviert
<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>
Wenn die erste Schaltfläche die Klasse button-white hat, ist der linke Rand ihres Labels nicht mit dem linken Rand der Elemente darüber oder darunter ausgerichtet. Sie können die Schaltfläche ausrichten, indem Sie ihr auch die Klasse button-unindented hinzufügen.
Das Label der ersten Schaltfläche ist nicht linksbündig mit diesem Textblock ausgerichtet:
<a class="button button-white" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Jetzt ist das Label der ersten Schaltfläche links mit diesem Textblock ausgerichtet:
<a class="button button-white button-unindented" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>
Schaltflächen mit einem Symbol vor dem Label
Wenn ein Symbol vor dem Label der Schaltfläche angezeigt werden soll, fügen Sie der Schaltfläche die Klasse button-with-icon und vor dem Textinhalt des Labels <span class="material-icons" aria-hidden="true">icon_name</span> hinzu. „icon_name“ ist ein Material Design-Symbol.
<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>
Schaltflächen mit einem Symbol nach dem Label
Wenn Sie nach dem Label der Schaltfläche ein Symbol anzeigen möchten, fügen Sie der Schaltfläche die Klasse button-with-icon und nach dem Textinhalt des Labels <span class="material-icons icon-after" aria-hidden="true">icon_name</span> hinzu. icon_name ist ein Material Design-Symbol.
<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>