按鈕

彩色按鈕應僅用於主要動作。如要使用次要動作 (包括連結)，請使用純白色按鈕。因此，所有先前為紅色和綠色的按鈕都會以藍色顯示，就像其他主要動作一樣。下列任一樣式也可搭配 <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 是 Material Design 圖示。

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>

標籤後方有圖示的按鈕

如要在按鈕標籤後方顯示圖示，請將 button-with-icon 類別新增至按鈕，並在標籤的文字內容後方新增 <span class="material-icons icon-after" aria-hidden="true">icon_name</span>，其中 icon_name 是 Material Design 圖示。

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>