ปุ่ม

ควรใช้ปุ่มสีสําหรับการดําเนินการหลักเท่านั้น สําหรับการดําเนินการรอง ซึ่งรวมถึงลิงก์ ให้ใช้ปุ่มธรรมดา (สีขาว) ดังนั้น ปุ่มสีแดงและสีเขียวทั้งหมดก่อนหน้านี้จึงแสดงผลเป็นสีน้ำเงินเหมือนการดําเนินการหลักอื่นๆ รูปแบบด้านล่างนี้ยังใช้ร่วมกับ <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 ลงในปุ่มด้วย

ป้ายกํากับของปุ่มแรกไม่จัดแนวกับบล็อกข้อความนี้ทางด้านซ้าย

ปุ่มที่ 1 ปุ่มที่ 2 

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

ตอนนี้ป้ายกํากับของปุ่มแรกจะจัดแนวซ้ายกับบล็อกข้อความนี้

ปุ่มที่ 1 ปุ่มที่ 2 

<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> ก่อนเนื้อหาข้อความของป้ายกำกับ โดยที่ 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>