Buttons

Colored buttons should only be used for primary actions. For secondary actions, including links, use a plain (white) button. Consequently, all the formerly red and green buttons are rendered in blue like other primary actions. Any of the styles below can also be used with <button>, <input type="submit">, and so forth.

Primary Secondary Flat Disabled

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

If the first button has the button-white class, the left edge of its label will not be aligned with the left edge of elements above or below it. You can pull the button into alignment by also adding a button-unindented class to the button.

The first button's label doesn't left-align with this block of text:

Button one Button two

<a class="button button-white" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>

Now the first button's label left-aligns with this block of text:

Button one Button two

<a class="button button-white button-unindented" href="#buttons">Button one</a>
<a class="button button-white" href="#buttons">Button two</a>

Buttons with an icon before the label

To display an icon before the button's label, add the button-with-icon class to the button and add <span class="material-icons" aria-hidden="true">icon_name</span> before the text content of the label, where icon_name is a Material Design icon.

Primary Secondary Flat

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

Buttons with an icon after the label

To display an icon after the button's label, add the button-with-icon class to the button and add <span class="material-icons icon-after" aria-hidden="true">icon_name</span> after the text content of the label, where icon_name is a Material Design icon.

Primary Secondary Flat

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