кнопки

Кольорові кнопки слід використовувати лише для основних дій. Для додаткових дій, включаючи посилання, використовуйте звичайну (білу) кнопку. Отже, усі колишні червоні та зелені кнопки відображаються синім кольором, як і інші основні дії. Будь-який із наведених нижче стилів також можна використовувати з <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> перед текстовим вмістом label, де 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 — це піктограма матеріального дизайну.

Первинне Вторинне Плоске 

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