Nút

Chỉ nên sử dụng nút có màu cho các thao tác chính. Đối với các thao tác phụ, bao gồm cả đường liên kết, hãy sử dụng nút trơn (màu trắng). Do đó, tất cả các nút trước đây có màu đỏ và xanh lục đều được hiển thị bằng màu xanh dương như các thao tác chính khác. Bạn cũng có thể sử dụng bất kỳ kiểu nào bên dưới với <button>, <input type="submit">, v.v.

Chính Phụ Cố định Tắt 

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

Nếu nút đầu tiên có lớp button-white, thì cạnh trái của nhãn sẽ không được căn chỉnh với cạnh trái của các phần tử ở phía trên hoặc phía dưới nút đó. Bạn có thể kéo nút vào vị trí căn chỉnh bằng cách thêm một lớp button-unindented vào nút.

Nhãn của nút đầu tiên không căn trái với khối văn bản này:

Nút một Nút hai 

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

Bây giờ, nhãn của nút đầu tiên sẽ căn trái với khối văn bản này:

Nút một Nút hai 

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

Nút có biểu tượng trước nhãn

Để hiển thị biểu tượng trước nhãn của nút, hãy thêm lớp button-with-icon vào nút và thêm <span class="material-icons" aria-hidden="true">icon_name</span> trước nội dung văn bản của nhãn, trong đó icon_name là biểu tượng Material Design.

Chính Phụ Phẳng 

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

Nút có biểu tượng sau nhãn

Để hiển thị biểu tượng sau nhãn của nút, hãy thêm lớp button-with-icon vào nút và thêm <span class="material-icons icon-after" aria-hidden="true">icon_name</span> sau nội dung văn bản của nhãn, trong đó icon_name là biểu tượng Material Design.

Chính Phụ Phẳng 

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