الأزرار

يجب استخدام الأزرار الملونة فقط للإجراءات الأساسية. بالنسبة إلى الإجراءات الثانوية، بما في ذلك الروابط، استخدِم زرًا عاديًا (أبيض). نتيجةً لذلك، يتم عرض جميع الأزرار الحمراء والخضراء سابقًا باللون الأزرق مثل الإجراءات الأساسية الأخرى. يمكن أيضًا استخدام أيّ من الأنماط أدناه مع <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 هو رمز تصميم المواد.

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 رمزًا لتصميم Material.

أساسي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>