<commit_before>---
layout: docs
title: Buttons
description: Buttons communicate the action that will occur when the user touches them.
group: material
redirect_from: "/material/"
toc: true
---

Material buttons trigger an ink reaction on press. They may display text, imagery, or both. Flat buttons and raised buttons are the most commonly used types.

## Buttons

### Flat buttons

Flat buttons are text-only buttons. They may be used in dialogs, toolbars, or inline. They do not lift, but fill with color on press.

**Outline buttons, i.e. `.btn-outline-*`, are the equivalent of Material flat buttons. For more details, please refer to [Components/Buttons documentation]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#outline-buttons).**

{% example html %}
<button class="btn btn-flat my-xs" type="button">Flat</button>
<button class="btn btn-flat-primary my-xs" type="button">Primary</button>
<button class="btn btn-flat-secondary my-xs" type="button">Secondary</button>
<button class="btn btn-flat-danger my-xs" type="button">Danger</button>
<button class="btn btn-flat-info my-xs" type="button">Info</button>
<button class="btn btn-flat-success my-xs" type="button">Success</button>
<button class="btn btn-flat-warning my-xs" type="button">Warning</button>
<button class="btn btn-flat-dark my-xs" type="button">Dark</button><commit_msg>Remove mentions of `waves` in button docs<commit_after>---
layout: docs
title: Buttons
description: Buttons communicate the action that will occur when the user touches them.
group: material
redirect_from: "/material/"
toc: true
---

Flat buttons and raised buttons are the most commonly used types.

## Buttons

### Flat buttons

Flat buttons are text-only buttons. They may be used in dialogs, toolbars, or inline. They do not lift, but fill with color on press.

**Outline buttons, i.e. `.btn-outline-*`, are the equivalent of Material flat buttons. For more details, please refer to [Components/Buttons documentation]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#outline-buttons).**

{% example html %}
<button class="btn btn-flat my-xs" type="button">Flat</button>
<button class="btn btn-flat-primary my-xs" type="button">Primary</button>
<button class="btn btn-flat-secondary my-xs" type="button">Secondary</button>
<button class="btn btn-flat-danger my-xs" type="button">Danger</button>
<button class="btn btn-flat-info my-xs" type="button">Info</button>
<button class="btn btn-flat-success my-xs" type="button">Success</button>
<button class="btn btn-flat-warning my-xs" type="button">Warning</button>
<button class="btn btn-flat-dark my-xs" type="button">Dark</button>
{'fraction_non_alphanumeric': 0.14264264264264265, 'fraction_numerical': 0.0, 'mean_word_length': 5.345238095238095, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4795441', 'n_tokens_mistral': 793, 'n_tokens_neox': 771, 'n_words': 274}