ボタン

色付きのボタンは、メインのアクションにのみ使用してください。リンクなどのセカンダリ アクションには、シンプルな（白色の）ボタンを使用します。そのため、以前は赤と緑だったボタンはすべて、他のプライマリ アクションと同様に青色でレンダリングされます。以下のいずれかのスタイルは、<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 クラスを追加すると、ボタンを調整できます。

最初のボタンのラベルが、このテキスト ブロックの左端に揃っていません。

ボタン 1 ボタン 2 

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

これで、最初のボタンのラベルがこのテキスト ブロックの左端に配置されます。

ボタン 1 ボタン 2 

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