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.
|
|
|
|
|
|
freshness: { owner: 'lizmitchell' reviewed: '2023-01-26' }
|
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"
|
|
|
|
|
|
src="images/button/hero.png">
|
|
|
|
|
|
|
|
|
|
|
|
</catalog-component-header>
|
2023-02-13 18:33:55 -08:00
|
|
|
|
|
|
|
|
|
|
* [Design article](https://m3.material.io/components/buttons) <!-- {.external} -->
|
|
|
|
|
|
* API Documentation (*coming soon*)
|
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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>
|
|
|
|
|
|
<md-elevated-button hasicon>
|
|
|
|
|
|
<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>
|
|
|
|
|
|
<md-tonal-button>Tonal</md-tonal-button>
|
|
|
|
|
|
<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-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-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-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>
|
|
|
|
|
|
</md-tonal-button>
|
|
|
|
|
|
|
2023-06-07 17:30:31 -07:00
|
|
|
|
<md-text-button trailingicon>
|
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-04-26 20:30:24 +02:00
|
|
|
|
<md-tonal-button>
|
|
|
|
|
|
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>
|
|
|
|
|
|
</md-tonal-button>
|
|
|
|
|
|
|
2023-04-26 20:30:24 +02:00
|
|
|
|
<md-text-button trailingicon>
|
|
|
|
|
|
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
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 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
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
|
|
|
<!-- go/md-tonal-button -->
|
|
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
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-06-07 17:30:31 -07:00
|
|
|
|
<md-tonal-button>Tonal</md-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-04-26 20:30:24 +02:00
|
|
|
|
<md-tonal-button>Tonal</md-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’t
|
|
|
|
|
|
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
|
|
|
|
|
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
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
|
|
|
Button supports [Material theming](../theming.md) and can be customized in terms
|
|
|
|
|
|
of color, typography, and shape.
|
|
|
|
|
|
|
|
|
|
|
|
### Elevated button tokens
|
|
|
|
|
|
|
|
|
|
|
|
Token | Default value
|
2023-05-31 16:47:46 -07:00
|
|
|
|
--------------------------------------- | -------------------------------
|
2023-02-13 18:33:55 -08:00
|
|
|
|
`--md-elevated-button-container-color` | `--md-sys-color-surface`
|
|
|
|
|
|
`--md-elevated-button-container-shape` | `9999px`
|
|
|
|
|
|
`--md-elevated-button-label-text-color` | `--md-sys-color-on-surface`
|
2023-02-17 15:53:59 -08:00
|
|
|
|
`--md-elevated-button-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
|
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
|
|
|
|
|
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;
|
|
|
|
|
|
--md-elevated-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
|
|
|
|
|
--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: 0px;
|
2023-02-17 15:53:59 -08:00
|
|
|
|
--md-elevated-button-label-text-type: 500 0.875rem/1.25rem 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-05-31 16:47:46 -07:00
|
|
|
|
------------------------------------- | -------------------------------
|
2023-02-13 18:33:55 -08:00
|
|
|
|
`--md-filled-button-container-color` | `--md-sys-color-primary`
|
|
|
|
|
|
`--md-filled-button-container-shape` | `9999px`
|
|
|
|
|
|
`--md-filled-button-label-text-color` | `--md-sys-color-on-primary`
|
2023-02-17 15:53:59 -08:00
|
|
|
|
`--md-filled-button-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
|
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
|
|
|
|
|
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;
|
|
|
|
|
|
--md-filled-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
|
|
|
|
|
--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: 0px;
|
2023-02-17 15:53:59 -08:00
|
|
|
|
--md-filled-button-label-text-type: 500 0.875rem/1.25rem 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
|
|
|
|
|
|
|
|
|
|
|
|
Token | Default value
|
|
|
|
|
|
------------------------------------ | ---------------------------------------
|
|
|
|
|
|
`--md-tonal-button-container-color` | `--md-sys-color-secondary-container`
|
|
|
|
|
|
`--md-tonal-button-container-shape` | `9999px`
|
|
|
|
|
|
`--md-tonal-button-label-text-color` | `--md-sys-color-on-secondary-container`
|
2023-02-17 15:53:59 -08:00
|
|
|
|
`--md-tonal-button-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
|
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
|
|
|
|
|
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;
|
|
|
|
|
|
--md-tonal-button-container-shape: 0px;
|
|
|
|
|
|
--md-tonal-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
|
|
|
|
|
--md-sys-color-secondary-container: #CCE8E7;
|
|
|
|
|
|
--md-sys-color-on-secondary-container: #051F1F;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
<md-tonal-button>Tonal</md-tonal-button>
|
|
|
|
|
|
</figure>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- catalog-only-end -->
|
|
|
|
|
|
|
2023-02-13 18:33:55 -08:00
|
|
|
|
```html
|
|
|
|
|
|
<style>
|
|
|
|
|
|
:root {
|
|
|
|
|
|
--md-tonal-button-container-shape: 0px;
|
2023-02-17 15:53:59 -08:00
|
|
|
|
--md-tonal-button-label-text-type: 500 0.875rem/1.25rem 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-04-26 20:30:24 +02:00
|
|
|
|
<md-tonal-button>Tonal</md-tonal-button>
|
2023-02-13 18:33:55 -08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### Outlined button tokens
|
|
|
|
|
|
|
|
|
|
|
|
Token | Default value
|
2023-05-31 16:47:46 -07:00
|
|
|
|
--------------------------------------- | -------------------------------
|
2023-02-13 18:33:55 -08:00
|
|
|
|
`--md-outlined-button-outline-color` | `--md-sys-color-outline`
|
|
|
|
|
|
`--md-outlined-button-container-shape` | `9999px`
|
|
|
|
|
|
`--md-outlined-button-label-text-color` | `--md-sys-color-primary`
|
2023-02-17 15:53:59 -08:00
|
|
|
|
`--md-outlined-button-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
|
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
|
|
|
|
|
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;
|
|
|
|
|
|
--md-outlined-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
|
|
|
|
|
--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: 0px;
|
2023-02-17 15:53:59 -08:00
|
|
|
|
--md-outlined-button-label-text-type: 500 0.875rem/1.25rem 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-05-31 16:47:46 -07:00
|
|
|
|
----------------------------------- | -------------------------------
|
2023-02-13 18:33:55 -08:00
|
|
|
|
`--md-text-button-label-text-color` | `--md-sys-color-primary`
|
2023-02-17 15:53:59 -08:00
|
|
|
|
`--md-text-button-label-text-type` | `500 0.875rem/1.25rem "Roboto"`
|
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
|
|
|
|
|
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;
|
|
|
|
|
|
--md-text-button-label-text-type: 500 0.875rem/1.25rem system-ui;
|
|
|
|
|
|
--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-02-17 15:53:59 -08:00
|
|
|
|
--md-text-button-label-text-type: 500 0.875rem/1.25rem 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
|
|
|
|
```
|
