Skip to content

Buttons

Types

The 5 types of common buttons

  1. Elevated button
  2. Filled button
  3. Filled tonal button
  4. Outlined button
  5. Text button

Usage

Buttons have label text that describes the action that will occur if a user taps a button.

An outlined button with the text "Back" next to a filled button with the text
"Complete"

html
<md-outlined-button>Back</md-outlined-button>
<md-filled-button>Complete</md-filled-button>

Icon

An icon may optionally be added to a button to help communicate the button's action and help draw attention.

A tonal button with a right arrow send icon with text 'send' and a text button
with the text 'open' with a trailing icon arrow
box

html
<md-filled-tonal-button>
  Send
  <svg slot="icon" viewBox="0 0 48 48"><path d="M6 40V8l38 16Zm3-4.65L36.2 24 9 12.5v8.4L21.1 24 9 27Zm0 0V12.5 27Z"/></svg>
</md-filled-tonal-button>

<md-text-button trailing-icon>
  Open
  <svg slot="icon" viewBox="0 0 48 48"><path d="M9 42q-1.2 0-2.1-.9Q6 40.2 6 39V9q0-1.2.9-2.1Q7.8 6 9 6h13.95v3H9v30h30V25.05h3V39q0 1.2-.9 2.1-.9.9-2.1.9Zm10.1-10.95L17 28.9 36.9 9H25.95V6H42v16.05h-3v-10.9Z"/></svg>
</md-text-button>

Accessibility

Add an aria-label attribute to buttons whose labels need a more descriptive label.

html
<md-elevated-button aria-label="Add a new contact">Add</md-elevated-button>

Focusable and disabled

By default, disabled buttons are not focusable with the keyboard, while "soft-disabled" buttons are. Some use cases encourage focusability of disabled toolbar items to increase their discoverability.

See the ARIA guidelines on focusability of disabled controls for guidance on when this is recommended.

html
<div role="toolbar">
  <md-text-button>Copy</md-text-button>
  <md-text-button>Cut</md-text-button>
  <!--
    This button is disabled but kept focusable to improve its discoverability
    in the toolbar.
  -->
  <md-text-button soft-disabled>Paste</md-text-button>
</div>

Elevated button

Elevated buttons are essentially filled tonal buttons with a shadow. To prevent shadow creep, only use them when absolutely necessary, such as when the button requires visual separation from a patterned background.

An elevated button

html
<md-elevated-button>Elevated</md-elevated-button>

Filled button

Filled buttons have the most visual impact after the FAB, and should be used for important, final actions that complete a flow, like Save, Join now, or Confirm.

html
<md-filled-button>Filled</md-filled-button>

Filled tonal button

A filled tonal button is an alternative middle ground between filled and outlined buttons. They're useful in contexts where a lower-priority button requires slightly more emphasis than an outline would give, such as "Next" in an onboarding flow.

A filled tonal button

html
<md-filled-tonal-button>Tonal</md-filled-tonal-button>

Outlined button

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.

An outlined button

html
<md-outlined-button>Outlined</md-outlined-button>

Text button

Text buttons are used for the lowest priority actions, especially when presenting multiple options.

A text button

html
<md-text-button>Text</md-text-button>

Theming

Button supports Material theming and can be customized in terms of color, typography, and shape.

Elevated button tokens

TokenDefault value
--md-elevated-button-container-color--md-sys-color-surface
--md-elevated-button-container-shape--md-sys-shape-corner-full
--md-elevated-button-label-text-color--md-sys-color-on-surface
--md-elevated-button-label-text-font--md-sys-typescale-label-large-font

Elevated button example

Image of an elevated button with a different theme applied

html
<style>
:root {
  --md-elevated-button-container-shape: 0px;
  --md-elevated-button-label-text-font: system-ui;
  --md-sys-color-surface-container-low: #FAFDFC;
  --md-sys-color-primary: #191C1C;
}
</style>

<md-elevated-button>Elevated</md-elevated-button>

Filled button tokens

TokenDefault value
--md-filled-button-container-color--md-sys-color-primary
--md-filled-button-container-shape--md-sys-shape-corner-full
--md-filled-button-label-text-color--md-sys-color-on-primary
--md-filled-button-label-text-font--md-sys-typescale-label-large-font

Filled button example

Image of a filled button with a different theme applied

html
<style>
:root {
  --md-filled-button-container-shape: 0px;
  --md-filled-button-label-text-font: system-ui;
  --md-sys-color-primary: #006A6A;
  --md-sys-color-on-primary: #FFFFFF;
}
</style>

<md-filled-button>Filled</md-filled-button>

Filled tonal button tokens

TokenDefault value
--md-filled-tonal-button-container-color--md-sys-color-secondary-container
--md-filled-tonal-button-container-shape--md-sys-shape-corner-full
--md-filled-tonal-button-label-text-color--md-sys-color-on-secondary-container
--md-filled-tonal-button-label-text-font--md-sys-typescale-label-large-font

Filled tonal button example

Image of a filled tonal button with a different theme applied

html
<style>
:root {
  --md-filled-tonal-button-container-shape: 0px;
  --md-filled-tonal-button-label-text-font: system-ui;
  --md-sys-color-secondary-container: #CCE8E7;
  --md-sys-color-on-secondary-container: #051F1F;
}
</style>

<md-filled-tonal-button>Tonal</md-filled-tonal-button>

Outlined button tokens

TokenDefault value
--md-outlined-button-outline-color--md-sys-color-outline
--md-outlined-button-container-shape--md-sys-shape-corner-full
--md-outlined-button-label-text-color--md-sys-color-primary
--md-outlined-button-label-text-font--md-sys-typescale-label-large-font

Outlined button example

Image of an outlined button with a different theme applied

html
<style>
:root {
  --md-outlined-button-container-shape: 0px;
  --md-outlined-button-label-text-font: system-ui;
  --md-sys-color-primary: #006A6A;
  --md-sys-color-outline: #6F7979;
}
</style>

<md-outlined-button>Outlined</md-outlined-button>

Text button tokens

TokenDefault value
--md-text-button-label-text-color--md-sys-color-primary
--md-text-button-label-text-font--md-sys-typescale-label-large-font

Text button example

Image of a text button with a different theme applied

html
<style>
:root {
  --md-text-button-label-text-font: system-ui;
  --md-sys-color-primary: #006A6A;
}
</style>

<md-text-button>Text</md-text-button>

API

MdElevatedButton <md-elevated-button>

Properties

PropertyAttributeTypeDefaultDescription
disableddisabledbooleanfalseWhether or not the button is disabled.
softDisabledsoft-disabledbooleanfalseWhether the button is "soft-disabled" (disabled but still focusable).
hrefhrefstring''The URL that the link button points to.
targettargetstring''Where to display the linked href URL for a link button. Common options include _blank to open in a new tab.
trailingIcontrailing-iconbooleanfalseWhether to render the icon at the inline end of the label rather than the inline start.
Note: Link buttons cannot have trailing icons.
hasIconhas-iconbooleanfalseWhether to display the icon or not.
typetypestring'submit'The default behavior of the button. May be "button", "reset", or "submit" (default).
valuevaluestring''The value added to a form with the button's name when the button submits a form.
namestringundefined
formHTMLFormElementundefined

MdFilledButton <md-filled-button>

Properties

PropertyAttributeTypeDefaultDescription
disableddisabledbooleanfalseWhether or not the button is disabled.
hrefhrefstring''The URL that the link button points to.
targettargetstring''Where to display the linked href URL for a link button. Common options include _blank to open in a new tab.
trailingIcontrailing-iconbooleanfalseWhether to render the icon at the inline end of the label rather than the inline start.
Note: Link buttons cannot have trailing icons.
hasIconhas-iconbooleanfalseWhether to display the icon or not.
typetypestring'submit'The default behavior of the button. May be "button", "reset", or "submit" (default).
valuevaluestring''The value added to a form with the button's name when the button submits a form.
namestringundefined
formHTMLFormElementundefined

MdFilledTonalButton <md-filled-tonal-button>

Properties

PropertyAttributeTypeDefaultDescription
disableddisabledbooleanfalseWhether or not the button is disabled.
hrefhrefstring''The URL that the link button points to.
targettargetstring''Where to display the linked href URL for a link button. Common options include _blank to open in a new tab.
trailingIcontrailing-iconbooleanfalseWhether to render the icon at the inline end of the label rather than the inline start.
Note: Link buttons cannot have trailing icons.
hasIconhas-iconbooleanfalseWhether to display the icon or not.
typetypestring'submit'The default behavior of the button. May be "button", "reset", or "submit" (default).
valuevaluestring''The value added to a form with the button's name when the button submits a form.
namestringundefined
formHTMLFormElementundefined

MdOutlinedButton <md-outlined-button>

Properties

PropertyAttributeTypeDefaultDescription
disableddisabledbooleanfalseWhether or not the button is disabled.
hrefhrefstring''The URL that the link button points to.
targettargetstring''Where to display the linked href URL for a link button. Common options include _blank to open in a new tab.
trailingIcontrailing-iconbooleanfalseWhether to render the icon at the inline end of the label rather than the inline start.
Note: Link buttons cannot have trailing icons.
hasIconhas-iconbooleanfalseWhether to display the icon or not.
typetypestring'submit'The default behavior of the button. May be "button", "reset", or "submit" (default).
valuevaluestring''The value added to a form with the button's name when the button submits a form.
namestringundefined
formHTMLFormElementundefined

MdTextButton <md-text-button>

Properties

PropertyAttributeTypeDefaultDescription
disableddisabledbooleanfalseWhether or not the button is disabled.
hrefhrefstring''The URL that the link button points to.
targettargetstring''Where to display the linked href URL for a link button. Common options include _blank to open in a new tab.
trailingIcontrailing-iconbooleanfalseWhether to render the icon at the inline end of the label rather than the inline start.
Note: Link buttons cannot have trailing icons.
hasIconhas-iconbooleanfalseWhether to display the icon or not.
typetypestring'submit'The default behavior of the button. May be "button", "reset", or "submit" (default).
valuevaluestring''The value added to a form with the button's name when the button submits a form.
namestringundefined
formHTMLFormElementundefined
Buttons has loaded