Buttons

Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.

There are five types of common buttons: elevated, filled, filled tonal, outlined, and text.

A phone showing a payment screen with a green filled button that says 'Make
payment'

View interactive demo inline.

Open interactive demo in new tab.

addElevated1
Filled2
Tonal3
Outlined4
Text5
  1. Elevated button
  2. Filled button
  3. Filled tonal button
  4. Outlined button
  5. Text button

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

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

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

Send

Open

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

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

<md-elevated-button aria-label="Add a new contact">Add</md-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.

Elevated
<md-elevated-button>Elevated</md-elevated-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.

Filled
<md-filled-button>Filled</md-filled-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.

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

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

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

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

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

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

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

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

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

Tonal

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

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

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

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

MdElevatedButton <md-elevated-button>

Link to “MdElevatedButton <md-elevated-button>”
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

MdFilledButton <md-filled-button>

Link to “MdFilledButton <md-filled-button>”
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>

Link to “MdFilledTonalButton <md-filled-tonal-button>”
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>

Link to “MdOutlinedButton <md-outlined-button>”
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
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
About
IntroductionQuick StartRoadmapSupportBundle Sizes
Theming
Material ThemingColorTypographyShape
Components
ButtonsCheckboxChipsDialogsFloating action button (FAB)Icon ButtonsListsMenusProgress indicatorsRadioRippleSelectSlidersSwitchTabsText field