Κουμπιά, Κουμπιά, Κουμπιά

Τα χρωματιστά κουμπιά πρέπει να χρησιμοποιούνται μόνο για κύριες ενέργειες. Για δευτερεύουσες ενέργειες, συμπεριλαμβανομένων των συνδέσμων, χρησιμοποιήστε ένα απλό (λευκό) κουμπί. Κατά συνέπεια, όλα τα παλιά κόκκινα και πράσινα κουμπιά αποδίδονται με μπλε χρώμα όπως άλλες κύριες ενέργειες. Οποιοδήποτε από τα παρακάτω στυλ μπορεί επίσης να χρησιμοποιηθεί με <button> , <input type="submit"> και ούτω καθεξής.

Πρωτεύον δευτερεύον Επίπεδο Απενεργοποιημένο

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

Εάν το πρώτο κουμπί έχει την κατηγορία button-white , το αριστερό άκρο της ετικέτας του δεν θα ευθυγραμμιστεί με το αριστερό άκρο των στοιχείων πάνω ή κάτω από αυτό. Μπορείτε να τραβήξετε το κουμπί σε ευθυγράμμιση προσθέτοντας επίσης μια κλάση button-unindented στο κουμπί.

Η ετικέτα του πρώτου κουμπιού δεν ευθυγραμμίζεται αριστερά με αυτό το μπλοκ κειμένου:

Κουμπί ένα Κουμπί δύο

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

Τώρα η ετικέτα του πρώτου κουμπιού ευθυγραμμίζεται αριστερά με αυτό το μπλοκ κειμένου:

Κουμπί ένα Κουμπί δύο

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

Κουμπιά με ένα εικονίδιο πριν από την ετικέτα

Για να εμφανίσετε ένα εικονίδιο πριν από την ετικέτα του κουμπιού, προσθέστε την κλάση button-with-icon στο κουμπί και προσθέστε <span class="material-icons" aria-hidden="true">icon_name</span> πριν από το περιεχόμενο κειμένου του label, όπου το icon_name είναι ένα εικονίδιο Material Design .

Πρωτεύουσα Δευτερεύουσα Επίπεδη

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

Κουμπιά με ένα εικονίδιο μετά την ετικέτα

Για να εμφανίσετε ένα εικονίδιο μετά την ετικέτα του κουμπιού, προσθέστε την κατηγορία button-with-icon στο κουμπί και προσθέστε <span class="material-icons icon-after" aria-hidden="true">icon_name</span> μετά το κείμενο περιεχόμενο της ετικέτας, όπου icon_name είναι ένα εικονίδιο Material Design.

Πρωτεύον Δευτερεύουσα Επίπεδη 

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