לחצנים

מומלץ להשתמש בלחצנים צבעוניים רק לפעולות ראשיות. לפעולות משניות, כולל קישורים, יש להשתמש בלחצן רגיל (לבן). כתוצאה מכך, כל הלחצנים שהיו בעבר אדומים וירוקים מוצגים כחולים, כמו פעולות ראשיות אחרות. אפשר להשתמש בכל אחד מהסגנונות הבאים גם עם <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> לפני תוכן הטקסט של התווית, כאשר 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>