버튼

색상 버튼은 기본 작업에만 사용해야 합니다. 링크를 비롯한 보조 작업에는 일반 (흰색) 버튼을 사용하세요. 따라서 이전에 빨간색과 녹색이었던 모든 버튼이 다른 기본 작업과 마찬가지로 파란색으로 렌더링됩니다. 아래의 스타일은 <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은 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>