بٹن، بٹن، بٹن

رنگین بٹن صرف بنیادی کارروائیوں کے لیے استعمال کیے جائیں۔ ثانوی کارروائیوں کے لیے، بشمول لنکس، ایک سادہ (سفید) بٹن استعمال کریں۔ نتیجتاً، تمام سابقہ ​​سرخ اور سبز بٹن دیگر بنیادی اعمال کی طرح نیلے رنگ میں پیش کیے جاتے ہیں۔ ذیل میں سے کسی بھی طرز کو <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 ایک میٹریل ڈیزائن آئیکن ہے۔

پرائمری ثانوی فلیٹ ۔

<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 ایک میٹریل ڈیزائن آئیکن ہے۔

پرائمری سیکنڈری فلیٹ 

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