बटन

रंगीन बटन का इस्तेमाल सिर्फ़ मुख्य ऐक्शन के लिए किया जाना चाहिए. लिंक के साथ-साथ सेकंडरी ऐक्शन के लिए, सादे (सफ़ेद) बटन का इस्तेमाल करें. इसलिए, पहले लाल और हरे रंग के सभी बटन, अन्य प्राइमरी ऐक्शन की तरह नीले रंग में रेंडर किए जाते हैं. यहां दी गई किसी भी स्टाइल का इस्तेमाल <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 आइकॉन है.

addप्राइमरी addसेकंडरी addफ़्लैट

<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, मटीरियल डिज़ाइन आइकॉन है.

प्राइमरीarrow_forward सेकंडरीadd फ़्लैटadd

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