دکمه ها

دکمه های رنگی باید فقط برای اقدامات اولیه استفاده شوند. برای اقدامات ثانویه، از جمله پیوندها، از یک دکمه ساده (سفید) استفاده کنید. در نتیجه، تمام دکمه‌های قرمز و سبز قبلی مانند سایر اقدامات اولیه به رنگ آبی ارائه می‌شوند. هر یک از سبک های زیر را می توان با <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>