Кнопки

Цветные кнопки следует использовать только для основных действий. Для второстепенных действий, включая ссылки, используйте простую (белую) кнопку. Следовательно, все ранее красные и зеленые кнопки отображаются синим, как и другие основные действия. Любой из приведенных ниже стилей также можно использовать с <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 — это значок Material Design.

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

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