2023-05-31 16:47:46 -07:00
<!-- catalog-only-start --><!-- ---
name: Buttons
dirname: button
-----><!-- catalog-only-end -->
<catalog-component-header>
<catalog-component-header-title slot="title">
2023-02-13 18:33:55 -08:00
# Buttons
2023-07-27 15:54:09 -07:00
<!-- no-catalog-start -->
2023-07-27 11:45:21 -07:00
2023-02-13 18:33:55 -08:00
<!--*
# Document freshness: For more information, see go/fresh-source.
2025-11-25 13:00:41 -08:00
freshness: { owner: 'lizmitchell' reviewed: '2025-11-23' }
2023-04-26 15:09:51 -07:00
tag: 'docType:reference'
2023-02-13 18:33:55 -08:00
*-->
<!-- go/md-button -->
<!-- [TOC] -->
2023-07-27 15:54:09 -07:00
<!-- external-only-start -->
**This documentation is fully rendered on the
[Material Web catalog ](https://material-web.dev/components/button/ ).**
<!-- external-only-end -->
2023-07-27 11:45:21 -07:00
2023-07-27 15:54:09 -07:00
<!-- no-catalog-end -->
2023-07-27 11:45:21 -07:00
2023-02-13 18:33:55 -08:00
[Buttons ](https://m3.material.io/components/buttons )<!-- {.external} --> 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.
2023-05-31 16:47:46 -07:00
</catalog-component-header-title>
<img
class="hero"
alt="A phone showing a payment screen with a green filled button that says 'Make
payment'"
title="There are 5 types of common buttons"
2024-04-06 21:06:07 +02:00
src="images/button/hero.webp">
2023-05-31 16:47:46 -07:00
</catalog-component-header>
2023-02-13 18:33:55 -08:00
* [Design article ](https://m3.material.io/components/buttons ) <!-- {.external} -->
2023-09-25 11:19:49 -07:00
* [API Documentation ](#api )
2023-04-24 14:05:46 -07:00
* [Source code ](https://github.com/material-components/material-web/tree/main/button )
2023-02-13 18:33:55 -08:00
<!-- {.external} -->
2023-05-31 16:47:46 -07:00
<!-- catalog-only-start -->
<!--
## Interactive Demo
{% playgroundexample dirname=dirname %}
-->
<!-- catalog-only-end -->
2023-02-13 18:33:55 -08:00
## Types
2023-07-27 15:54:09 -07:00
<!-- no-catalog-start -->
2023-05-31 16:47:46 -07:00
2024-04-06 21:06:07 +02:00
2023-05-31 16:47:46 -07:00
2023-07-27 15:54:09 -07:00
<!-- no-catalog-end -->
2023-05-31 16:47:46 -07:00
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
class="types-image"
style="justify-content:center;"
title="Elevated, filled, filled tonal, outlined, and text buttons"
aria-label="The 5 types of common buttons">
<style>
.types-image .wrapper,
.types-image .wrapper > * {
display: flex;
padding: 8px;
flex-wrap: wrap;
justify-content: center;
}
.types-image .wrapper > * {
flex-direction: column;
align-items: center;
padding-inline: 16px;
}
.types-image span {
display: inline-flex;
background-color: var(--md-sys-color-inverse-surface);
color: var(--md-sys-color-inverse-on-surface);
padding: 8px;
margin-block-start: 8px;
width: 24px;
height: 24px;
border-radius: 50%;
justify-content: center;
align-items: center;
}
</style>
2023-06-07 17:30:31 -07:00
<div class="wrapper">
2023-05-31 16:47:46 -07:00
<div>
2025-01-22 19:23:04 +00:00
<md-elevated-button has-icon>
2023-05-31 16:47:46 -07:00
<md-icon slot="icon">add</md-icon>
Elevated
</md-elevated-button>
<span>1</span>
</div>
<div>
<md-filled-button>Filled</md-filled-button>
<span>2</span>
</div>
<div>
2023-07-31 14:56:57 -07:00
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
2023-05-31 16:47:46 -07:00
<span>3</span>
</div>
<div>
<md-outlined-button>Outlined</md-outlined-button>
<span>4</span>
</div>
<div>
<md-text-button>Text</md-text-button>
<span>5</span>
</div>
</div>
</figure>
</div>
-->
<!-- catalog-only-end -->
2023-02-13 18:33:55 -08:00
1. [Elevated button ](#elevated-button )
1. [Filled button ](#filled-button )
1. [Filled tonal button ](#filled-tonal-button )
1. [Outlined button ](#outlined-button )
1. [Text button ](#text-button )
## Usage
Buttons have label text that describes the action that will occur if a user taps
a button.
2023-07-27 15:54:09 -07:00
<!-- no-catalog-start -->
2023-05-31 16:47:46 -07:00
2023-05-31 16:47:46 -07:00
2023-07-27 15:54:09 -07:00
<!-- no-catalog-end -->
2023-05-31 16:47:46 -07:00
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;gap: 8px;"
title="Outlined and filled buttons."
2023-06-01 10:18:51 -07:00
aria-label="An outlined button with the text 'Back' next to a filled button with the text 'Complete'">
2023-06-07 17:30:31 -07:00
<md-outlined-button>Back</md-outlined-button>
<md-filled-button>Complete</md-filled-button>
2023-05-31 16:47:46 -07:00
</figure>
</div>
-->
<!-- catalog-only-end -->
2023-02-13 18:33:55 -08:00
``` html
2023-04-26 20:30:24 +02:00
< md-outlined-button > Back< / md-outlined-button >
< md-filled-button > Complete< / md-filled-button >
2023-02-13 18:33:55 -08:00
```
### Icon
An icon may optionally be added to a button to help communicate the button's
action and help draw attention.
2023-07-27 15:54:09 -07:00
<!-- no-catalog-start -->
2023-05-31 16:47:46 -07:00
2023-05-31 16:47:46 -07:00
2023-07-27 15:54:09 -07:00
<!-- no-catalog-end -->
2023-05-31 16:47:46 -07:00
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;gap: 8px;"
title="Outlined and filled buttons."
2023-06-01 10:18:51 -07:00
aria-label="An outlined button with the text 'Back' next to a filled button with the text 'Complete'">
2023-07-31 14:56:57 -07:00
<md-filled-tonal-button>
2023-05-31 16:47:46 -07:00
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>
2023-07-31 14:56:57 -07:00
</md-filled-tonal-button>
2023-05-31 16:47:46 -07:00
2023-09-15 14:44:03 -05:00
<md-text-button trailing-icon>
2023-05-31 16:47:46 -07:00
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>
</figure>
</div>
-->
<!-- catalog-only-end -->
2023-02-13 18:33:55 -08:00
``` html
2023-07-31 14:56:57 -07:00
< md-filled-tonal-button >
2023-04-26 20:30:24 +02:00
Send
2023-02-13 18:33:55 -08:00
< 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 >
2023-07-31 14:56:57 -07:00
< / md-filled-tonal-button >
2023-02-13 18:33:55 -08:00
2023-09-15 14:44:03 -05:00
< md-text-button trailing-icon >
2023-04-26 20:30:24 +02:00
Open
2023-02-13 18:33:55 -08:00
< 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` ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label )<!-- {.external} -->
attribute to buttons whose labels need a more descriptive label.
``` html
2023-04-26 20:30:24 +02:00
< md-elevated-button aria-label = "Add a new contact" > Add< / md-elevated-button >
2023-02-13 18:33:55 -08:00
```
2024-07-12 13:02:28 -07:00
### 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 ](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls )<!-- {.external} -->
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 >
```
2023-02-13 18:33:55 -08:00
## Elevated button
<!-- go/md-elevated-button -->
[Elevated buttons ](https://m3.material.io/components/buttons/guidelines#4e89da4d-a8fa-4e20-bb8d-b8a93eff3e3e )<!-- {.external} -->
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.
2023-07-27 15:54:09 -07:00
<!-- no-catalog-start -->
2023-05-31 16:47:46 -07:00
2024-04-06 21:06:07 +02:00
2023-02-13 18:33:55 -08:00
2023-07-27 15:54:09 -07:00
<!-- no-catalog-end -->
2023-05-31 16:47:46 -07:00
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;align-items:center;"
aria-label="An elevated button.">
2023-06-07 17:30:31 -07:00
<md-elevated-button>Elevated</md-elevated-button>
2023-05-31 16:47:46 -07:00
</figure>
</div>
-->
<!-- catalog-only-end -->
2023-02-13 18:33:55 -08:00
``` html
2023-04-26 20:30:24 +02:00
< md-elevated-button > Elevated< / md-elevated-button >
2023-02-13 18:33:55 -08:00
```
## Filled button
<!-- go/md-filled-button -->
[Filled buttons ](https://m3.material.io/components/buttons/guidelines#9ecffdb3-ef29-47e7-8d5d-f78b404fcafe )<!-- {.external} -->
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.
2023-07-27 15:54:09 -07:00
<!-- no-catalog-end -->
2023-05-31 16:47:46 -07:00
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;align-items:center;"
aria-label="A filled button.">
2023-06-07 17:30:31 -07:00
<md-filled-button>Filled</md-filled-button>
2023-05-31 16:47:46 -07:00
</figure>
</div>
-->
<!-- catalog-only-end -->
2023-02-13 18:33:55 -08:00
``` html
2023-04-26 20:30:24 +02:00
< md-filled-button > Filled< / md-filled-button >
2023-02-13 18:33:55 -08:00
```
## Filled tonal button
2023-07-31 14:56:57 -07:00
<!-- go/md-filled-tonal-button -->
2023-02-13 18:33:55 -08:00
A
[filled tonal button ](https://m3.material.io/components/buttons/guidelines#07a1577b-aaf5-4824-a698-03526421058b )<!-- {.external} -->
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.
2023-07-27 15:54:09 -07:00
<!-- no-catalog-start -->
2023-05-31 16:47:46 -07:00
2024-04-06 21:06:07 +02:00
2023-02-13 18:33:55 -08:00
2023-07-27 15:54:09 -07:00
<!-- no-catalog-end -->
2023-05-31 16:47:46 -07:00
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;align-items:center;"
aria-label="A tonal button.">
2023-07-31 14:56:57 -07:00
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
2023-05-31 16:47:46 -07:00
</figure>
</div>
-->
<!-- catalog-only-end -->
2023-02-13 18:33:55 -08:00
``` html
2023-07-31 14:56:57 -07:00
< md-filled-tonal-button > Tonal< / md-filled-tonal-button >
2023-02-13 18:33:55 -08:00
```
## Outlined button
<!-- go/md-outlined-button -->
[Outlined buttons ](https://m3.material.io/components/buttons/guidelines#3742b09f-c224-43e0-a83e-541bd29d0f05 )<!-- {.external} -->
are medium-emphasis buttons. They contain actions that are important, but aren’
the primary action in an app.
2023-07-27 15:54:09 -07:00
<!-- no-catalog-start -->
2023-05-31 16:47:46 -07:00
2024-04-06 21:06:07 +02:00
2023-02-13 18:33:55 -08:00
2023-07-27 15:54:09 -07:00
<!-- no-catalog-end -->
2023-05-31 16:47:46 -07:00
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;align-items:center;"
aria-label="An outlined button.">
2023-06-07 17:30:31 -07:00
<md-outlined-button>Outlined</md-outlined-button>
2023-05-31 16:47:46 -07:00
</figure>
</div>
-->
<!-- catalog-only-end -->
2023-02-13 18:33:55 -08:00
``` html
2023-04-26 20:30:24 +02:00
< md-outlined-button > Outlined< / md-outlined-button >
2023-02-13 18:33:55 -08:00
```
## Text button
<!-- go/md-text-button -->
[Text buttons ](https://m3.material.io/components/buttons/guidelines#c9bcbc0b-ee05-45ad-8e80-e814ae919fbb )<!-- {.external} -->
are used for the lowest priority actions, especially when presenting multiple
options.
2023-07-27 15:54:09 -07:00
<!-- no-catalog-start -->
2023-05-31 16:47:46 -07:00
2024-04-06 21:06:07 +02:00
2023-02-13 18:33:55 -08:00
2023-07-27 15:54:09 -07:00
<!-- no-catalog-end -->
2023-05-31 16:47:46 -07:00
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;align-items:center;"
aria-label="A text button.">
2023-06-07 17:30:31 -07:00
<md-text-button>Text</md-text-button>
2023-05-31 16:47:46 -07:00
</figure>
</div>
-->
<!-- catalog-only-end -->
2023-02-13 18:33:55 -08:00
``` html
2023-04-26 20:30:24 +02:00
< md-text-button > Text< / md-text-button >
2023-02-13 18:33:55 -08:00
```
## Theming
2023-09-11 09:32:19 -07:00
Button supports [Material theming ](../theming/README.md ) and can be customized
in terms of color, typography, and shape.
2023-02-13 18:33:55 -08:00
### Elevated button tokens
Token | Default value
2023-09-06 10:55:45 -07:00
--------------------------------------- | -------------------------------------
2023-02-13 18:33:55 -08:00
`--md-elevated-button-container-color` | `--md-sys-color-surface`
2024-02-15 12:59:45 -08:00
`--md-elevated-button-container-shape` | `--md-sys-shape-corner-full`
2023-02-13 18:33:55 -08:00
`--md-elevated-button-label-text-color` | `--md-sys-color-on-surface`
2023-09-06 10:55:45 -07:00
`--md-elevated-button-label-text-font` | `--md-sys-typescale-label-large-font`
2023-02-13 18:33:55 -08:00
2023-04-24 14:05:46 -07:00
* [All tokens ](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-elevated-button.scss )
2023-02-13 18:33:55 -08:00
<!-- {.external} -->
### Elevated button example
2023-07-27 15:54:09 -07:00
<!-- no-catalog-start -->
2023-05-31 16:47:46 -07:00
2024-04-06 21:06:07 +02:00
2023-02-13 18:33:55 -08:00
2023-07-27 15:54:09 -07:00
<!-- no-catalog-end -->
2023-05-31 16:47:46 -07:00
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;align-items:center;"
class="styled-example"
title="Elevated button theming example."
aria-label="Image of an elevated button with a different theme applied">
<style>
.styled-example {
background-color: white;
--md-elevated-button-container-shape: 0px;
2023-09-06 10:55:45 -07:00
--md-elevated-button-label-text-font: system-ui;
2023-05-31 16:47:46 -07:00
--md-sys-color-surface-container-low: #FAFDFC ;
--md-sys-color-primary: #191C1C ;
}
</style>
<md-elevated-button>Elevated</md-elevated-button>
</figure>
</div>
-->
<!-- catalog-only-end -->
2023-02-13 18:33:55 -08:00
``` html
< style >
: root {
--md-elevated-button-container-shape : 0 px ;
2023-09-06 10:55:45 -07:00
--md-elevated-button-label-text-font : system-ui ;
2023-05-31 16:47:46 -07:00
--md-sys-color-surface-container-low : #FAFDFC ;
--md-sys-color-primary : #191C1C ;
2023-02-13 18:33:55 -08:00
}
< / style >
2023-04-26 20:30:24 +02:00
< md-elevated-button > Elevated< / md-elevated-button >
2023-02-13 18:33:55 -08:00
```
### Filled button tokens
Token | Default value
2023-09-06 10:55:45 -07:00
------------------------------------- | -------------------------------------
2023-02-13 18:33:55 -08:00
`--md-filled-button-container-color` | `--md-sys-color-primary`
2024-02-15 12:59:45 -08:00
`--md-filled-button-container-shape` | `--md-sys-shape-corner-full`
2023-02-13 18:33:55 -08:00
`--md-filled-button-label-text-color` | `--md-sys-color-on-primary`
2023-09-06 10:55:45 -07:00
`--md-filled-button-label-text-font` | `--md-sys-typescale-label-large-font`
2023-02-13 18:33:55 -08:00
2023-04-24 14:05:46 -07:00
* [All tokens ](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-button.scss )
2023-02-13 18:33:55 -08:00
<!-- {.external} -->
### Filled button example
2023-07-27 15:54:09 -07:00
<!-- no-catalog-start -->
2023-05-31 16:47:46 -07:00
2024-04-06 21:06:07 +02:00
2023-02-13 18:33:55 -08:00
2023-07-27 15:54:09 -07:00
<!-- no-catalog-end -->
2023-05-31 16:47:46 -07:00
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;align-items:center;"
class="styled-example"
title="Filled button theming example."
aria-label="Image of a filled button with a different theme applied">
<style>
.styled-example {
background-color: white;
--md-filled-button-container-shape: 0px;
2023-09-06 10:55:45 -07:00
--md-filled-button-label-text-font: system-ui;
2023-05-31 16:47:46 -07:00
--md-sys-color-primary: #006A6A ;
--md-sys-color-on-primary: #FFFFFF ;
}
</style>
<md-filled-button>Filled</md-filled-button>
</figure>
</div>
-->
<!-- catalog-only-end -->
2023-02-13 18:33:55 -08:00
``` html
< style >
: root {
--md-filled-button-container-shape : 0 px ;
2023-09-06 10:55:45 -07:00
--md-filled-button-label-text-font : system-ui ;
2023-02-13 18:33:55 -08:00
--md-sys-color-primary : #006A6A ;
--md-sys-color-on-primary : #FFFFFF ;
}
< / style >
2023-04-26 20:30:24 +02:00
< md-filled-button > Filled< / md-filled-button >
2023-02-13 18:33:55 -08:00
```
### Filled tonal button tokens
2023-07-31 14:56:57 -07:00
Token | Default value
------------------------------------------- | -------------
`--md-filled-tonal-button-container-color` | `--md-sys-color-secondary-container`
2024-02-15 12:59:45 -08:00
`--md-filled-tonal-button-container-shape` | `--md-sys-shape-corner-full`
2023-07-31 14:56:57 -07:00
`--md-filled-tonal-button-label-text-color` | `--md-sys-color-on-secondary-container`
2023-09-06 10:55:45 -07:00
`--md-filled-tonal-button-label-text-font` | `--md-sys-typescale-label-large-font`
2023-02-13 18:33:55 -08:00
2023-04-24 14:05:46 -07:00
* [All tokens ](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-tonal-button.scss )
2023-02-13 18:33:55 -08:00
<!-- {.external} -->
### Filled tonal button example
2023-07-27 15:54:09 -07:00
<!-- no-catalog-start -->
2023-05-31 16:47:46 -07:00
2024-04-06 21:06:07 +02:00
2023-02-13 18:33:55 -08:00
2023-07-27 15:54:09 -07:00
<!-- no-catalog-end -->
2023-05-31 16:47:46 -07:00
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;align-items:center;"
class="styled-example"
title="Tonal button theming example."
aria-label="Image of a tonal button with a different theme applied">
<style>
.styled-example {
background-color: white;
2023-07-31 14:56:57 -07:00
--md-filled-tonal-button-container-shape: 0px;
2023-09-06 10:55:45 -07:00
--md-filled-tonal-button-label-text-font: system-ui;
2023-05-31 16:47:46 -07:00
--md-sys-color-secondary-container: #CCE8E7 ;
--md-sys-color-on-secondary-container: #051F1F ;
}
</style>
2023-07-31 14:56:57 -07:00
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
2023-05-31 16:47:46 -07:00
</figure>
</div>
-->
<!-- catalog-only-end -->
2023-02-13 18:33:55 -08:00
``` html
< style >
: root {
2023-07-31 14:56:57 -07:00
--md-filled-tonal-button-container-shape : 0 px ;
2023-09-06 10:55:45 -07:00
--md-filled-tonal-button-label-text-font : system-ui ;
2023-02-13 18:33:55 -08:00
--md-sys-color-secondary-container : #CCE8E7 ;
--md-sys-color-on-secondary-container : #051F1F ;
}
< / style >
2023-07-31 14:56:57 -07:00
< md-filled-tonal-button > Tonal< / md-filled-tonal-button >
2023-02-13 18:33:55 -08:00
```
### Outlined button tokens
Token | Default value
2023-09-06 10:55:45 -07:00
--------------------------------------- | -------------------------------------
2023-02-13 18:33:55 -08:00
`--md-outlined-button-outline-color` | `--md-sys-color-outline`
2024-02-15 12:59:45 -08:00
`--md-outlined-button-container-shape` | `--md-sys-shape-corner-full`
2023-02-13 18:33:55 -08:00
`--md-outlined-button-label-text-color` | `--md-sys-color-primary`
2023-09-06 10:55:45 -07:00
`--md-outlined-button-label-text-font` | `--md-sys-typescale-label-large-font`
2023-02-13 18:33:55 -08:00
2023-04-24 14:05:46 -07:00
* [All tokens ](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-outlined-button.scss )
2023-02-13 18:33:55 -08:00
<!-- {.external} -->
### Outlined button example
2023-07-27 15:54:09 -07:00
<!-- no-catalog-start -->
2023-05-31 16:47:46 -07:00
2024-04-06 21:06:07 +02:00
2023-02-13 18:33:55 -08:00
2023-07-27 15:54:09 -07:00
<!-- no-catalog-end -->
2023-05-31 16:47:46 -07:00
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;align-items:center;"
class="styled-example"
title="Outlined button theming example."
aria-label="Image of a outlined button with a different theme applied">
<style>
.styled-example {
background-color: white;
--md-outlined-button-container-shape: 0px;
2023-09-06 10:55:45 -07:00
--md-outlined-button-label-text-font: system-ui;
2023-05-31 16:47:46 -07:00
--md-sys-color-primary: #006A6A ;
--md-sys-color-outline: #6F7979 ;
}
</style>
<md-outlined-button>Outlined</md-outlined-button>
</figure>
</div>
-->
<!-- catalog-only-end -->
2023-02-13 18:33:55 -08:00
``` html
< style >
: root {
--md-outlined-button-container-shape : 0 px ;
2023-09-06 10:55:45 -07:00
--md-outlined-button-label-text-font : system-ui ;
2023-02-13 18:33:55 -08:00
--md-sys-color-primary : #006A6A ;
--md-sys-color-outline : #6F7979 ;
}
< / style >
2023-04-26 20:30:24 +02:00
< md-outlined-button > Outlined< / md-outlined-button >
2023-02-13 18:33:55 -08:00
```
### Text button tokens
Token | Default value
2023-09-06 10:55:45 -07:00
----------------------------------- | -------------------------------------
2023-02-13 18:33:55 -08:00
`--md-text-button-label-text-color` | `--md-sys-color-primary`
2023-09-06 10:55:45 -07:00
`--md-text-button-label-text-font` | `--md-sys-typescale-label-large-font`
2023-02-13 18:33:55 -08:00
2023-04-24 14:05:46 -07:00
* [All tokens ](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-text-button.scss )
2023-02-13 18:33:55 -08:00
<!-- {.external} -->
### Text button example
2023-07-27 15:54:09 -07:00
<!-- no-catalog-start -->
2023-05-31 16:47:46 -07:00
2024-04-06 21:06:07 +02:00
2023-02-13 18:33:55 -08:00
2023-07-27 15:54:09 -07:00
<!-- no-catalog-end -->
2023-05-31 16:47:46 -07:00
<!-- catalog-only-start -->
<!--
<div class="figure-wrapper">
<figure
style="justify-content:center;align-items:center;"
class="styled-example"
title="Text button theming example."
aria-label="Image of a text button with a different theme applied">
<style>
.styled-example {
background-color: white;
2023-09-06 10:55:45 -07:00
--md-text-button-label-text-font: system-ui;
2023-05-31 16:47:46 -07:00
--md-sys-color-primary: #006A6A ;
}
</style>
2023-06-07 17:30:31 -07:00
<md-text-button>Text</md-text-button>
2023-05-31 16:47:46 -07:00
</figure>
</div>
-->
<!-- catalog-only-end -->
2023-02-13 18:33:55 -08:00
``` html
< style >
: root {
2023-09-06 10:55:45 -07:00
--md-text-button-label-text-font : system-ui ;
2023-02-13 18:33:55 -08:00
--md-sys-color-primary : #006A6A ;
}
< / style >
2023-04-26 20:30:24 +02:00
< md-text-button > Text< / md-text-button >
2023-02-13 18:33:55 -08:00
```
2023-09-19 21:05:08 -07:00
<!-- auto-generated API docs start -->
## API
2024-11-04 10:13:50 -08:00
2023-09-25 21:32:35 +00:00
### MdElevatedButton <code><md-elevated-button></code>
2023-09-19 21:05:08 -07:00
#### Properties
<!-- mdformat off(autogenerated might break rendering in catalog) -->
2024-06-04 21:57:37 -07:00
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
2024-11-04 10:13:50 -08:00
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
2024-06-04 21:57:37 -07:00
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
2025-08-21 17:32:12 +00:00
| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). |
2024-06-04 21:57:37 -07:00
| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
2024-06-20 13:43:26 -07:00
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
2024-06-04 21:57:37 -07:00
| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
| `name` | | `string` | `undefined` | |
| `form` | | `HTMLFormElement` | `undefined` | |
2023-09-19 21:05:08 -07:00
<!-- mdformat on(autogenerated might break rendering in catalog) -->
2023-09-25 21:32:35 +00:00
### MdFilledButton <code><md-filled-button></code>
2023-09-19 21:05:08 -07:00
#### Properties
<!-- mdformat off(autogenerated might break rendering in catalog) -->
2024-06-04 21:57:37 -07:00
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
2024-11-04 10:13:50 -08:00
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
2024-06-04 21:57:37 -07:00
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
2025-08-21 17:32:12 +00:00
| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). |
2024-06-04 21:57:37 -07:00
| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
2024-06-20 13:43:26 -07:00
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
2024-06-04 21:57:37 -07:00
| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
| `name` | | `string` | `undefined` | |
| `form` | | `HTMLFormElement` | `undefined` | |
2023-09-19 21:05:08 -07:00
<!-- mdformat on(autogenerated might break rendering in catalog) -->
2023-09-25 21:32:35 +00:00
### MdFilledTonalButton <code><md-filled-tonal-button></code>
2023-09-19 21:05:08 -07:00
#### Properties
<!-- mdformat off(autogenerated might break rendering in catalog) -->
2024-06-04 21:57:37 -07:00
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
2024-11-04 10:13:50 -08:00
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
2024-06-04 21:57:37 -07:00
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
2025-08-21 17:32:12 +00:00
| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). |
2024-06-04 21:57:37 -07:00
| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
2024-06-20 13:43:26 -07:00
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
2024-06-04 21:57:37 -07:00
| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
| `name` | | `string` | `undefined` | |
| `form` | | `HTMLFormElement` | `undefined` | |
2023-09-19 21:05:08 -07:00
<!-- mdformat on(autogenerated might break rendering in catalog) -->
2023-09-25 21:32:35 +00:00
### MdOutlinedButton <code><md-outlined-button></code>
2023-09-19 21:05:08 -07:00
#### Properties
<!-- mdformat off(autogenerated might break rendering in catalog) -->
2024-06-04 21:57:37 -07:00
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
2024-11-04 10:13:50 -08:00
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
2024-06-04 21:57:37 -07:00
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
2025-08-21 17:32:12 +00:00
| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). |
2024-06-04 21:57:37 -07:00
| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
2024-06-20 13:43:26 -07:00
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
2024-06-04 21:57:37 -07:00
| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
| `name` | | `string` | `undefined` | |
| `form` | | `HTMLFormElement` | `undefined` | |
2023-09-19 21:05:08 -07:00
<!-- mdformat on(autogenerated might break rendering in catalog) -->
2023-09-25 21:32:35 +00:00
### MdTextButton <code><md-text-button></code>
2023-09-19 21:05:08 -07:00
#### Properties
<!-- mdformat off(autogenerated might break rendering in catalog) -->
2024-06-04 21:57:37 -07:00
| Property | Attribute | Type | Default | Description |
| --- | --- | --- | --- | --- |
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
2024-11-04 10:13:50 -08:00
| `softDisabled` | `soft-disabled` | `boolean` | `false` | Whether or not the button is "soft-disabled" (disabled but still focusable).<br>Use this when a button needs increased visibility when disabled. See https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls for more guidance on when this is needed. |
2024-06-04 21:57:37 -07:00
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
2025-08-21 17:32:12 +00:00
| `download` | `download` | `string` | `''` | The filename to use when downloading the linked resource. If not specified, the browser will determine a filename. This is only applicable when the button is used as a link (`href` is set). |
2024-06-04 21:57:37 -07:00
| `target` | `target` | `string` | `''` | Where to display the linked `href` URL for a link button. Common options include `_blank` to open in a new tab. |
| `trailingIcon` | `trailing-icon` | `boolean` | `false` | Whether to render the icon at the inline end of the label rather than the inline start.<br>_Note:_ Link buttons cannot have trailing icons. |
| `hasIcon` | `has-icon` | `boolean` | `false` | Whether to display the icon or not. |
2024-06-20 13:43:26 -07:00
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
2024-06-04 21:57:37 -07:00
| `value` | `value` | `string` | `''` | The value added to a form with the button's name when the button submits a form. |
| `name` | | `string` | `undefined` | |
| `form` | | `HTMLFormElement` | `undefined` | |
2023-09-19 21:05:08 -07:00
<!-- mdformat on(autogenerated might break rendering in catalog) -->
<!-- auto-generated API docs end -->
