Tombol

Tombol berwarna hanya boleh digunakan untuk tindakan utama. Untuk tindakan sekunder, termasuk link, gunakan tombol biasa (putih). Akibatnya, semua tombol yang sebelumnya berwarna merah dan hijau dirender dalam warna biru seperti tindakan utama lainnya. Gaya apa pun di bawah ini juga dapat digunakan dengan <button>, <input type="submit">, dan sebagainya.

Utama Sekunder Datar Nonaktif 

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

Jika tombol pertama memiliki class button-white, tepi kiri labelnya tidak akan sejajar dengan tepi kiri elemen di atas atau di bawahnya. Anda dapat menarik tombol ke dalam perataan dengan menambahkan class button-unindented ke tombol.

Label tombol pertama tidak sejajar kiri dengan blok teks ini:

Tombol satu Tombol dua 

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

Sekarang label tombol pertama sejajar dengan blok teks ini:

Tombol satu Tombol dua 

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

Tombol dengan ikon sebelum label

Untuk menampilkan ikon sebelum label tombol, tambahkan class button-with-icon ke tombol dan tambahkan <span class="material-icons" aria-hidden="true">icon_name</span> sebelum konten teks label, dengan icon_name adalah ikon Desain Material.

Utama Sekunder Datar 

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

Tombol dengan ikon setelah label

Untuk menampilkan ikon setelah label tombol, tambahkan class button-with-icon ke tombol dan tambahkan <span class="material-icons icon-after" aria-hidden="true">icon_name</span> setelah konten teks label, dengan icon_name adalah ikon Desain Material.

Utama Sekunder Datar 

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