mirror of
https://github.com/thejakubruzicka/MNotes.git
synced 2025-07-10 22:44:05 +02:00
New version. Add Material UI implementation with theme customization, about dialog, and news system
This commit is contained in:
VlastikYoutubeKo
parent
5bc9c9bdb1
commit
1d58835a65
190 changed files with 12296 additions and 54 deletions
834
components-wiki/button.md
Normal file
834
components-wiki/button.md
Normal file
|
|
@ -0,0 +1,834 @@
|
|||
<!-- catalog-only-start --><!-- ---
|
||||
name: Buttons
|
||||
dirname: button
|
||||
-----><!-- catalog-only-end -->
|
||||
|
||||
<catalog-component-header>
|
||||
<catalog-component-header-title slot="title">
|
||||
|
||||
# Buttons
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
<!--*
|
||||
# Document freshness: For more information, see go/fresh-source.
|
||||
freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
|
||||
tag: 'docType:reference'
|
||||
*-->
|
||||
|
||||
<!-- go/md-button -->
|
||||
|
||||
<!-- [TOC] -->
|
||||
|
||||
<!-- external-only-start -->
|
||||
**This documentation is fully rendered on the
|
||||
[Material Web catalog](https://material-web.dev/components/button/).**
|
||||
<!-- external-only-end -->
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
|
||||
[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.
|
||||
|
||||
</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.webp">
|
||||
|
||||
</catalog-component-header>
|
||||
|
||||
* [Design article](https://m3.material.io/components/buttons) <!-- {.external} -->
|
||||
* [API Documentation](#api)
|
||||
* [Source code](https://github.com/material-components/material-web/tree/main/button)
|
||||
<!-- {.external} -->
|
||||
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
## Interactive Demo
|
||||
|
||||
{% playgroundexample dirname=dirname %}
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
## Types
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- 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>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<md-elevated-button has-icon>
|
||||
<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-filled-tonal-button>Tonal</md-filled-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 -->
|
||||
|
||||
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.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;gap: 8px;"
|
||||
title="Outlined and filled buttons."
|
||||
aria-label="An outlined button with the text 'Back' next to a filled button with the text 'Complete'">
|
||||
<md-outlined-button>Back</md-outlined-button>
|
||||
<md-filled-button>Complete</md-filled-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```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.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;gap: 8px;"
|
||||
title="Outlined and filled buttons."
|
||||
aria-label="An outlined button with the text 'Back' next to a filled button with the text 'Complete'">
|
||||
<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>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```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`](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
|
||||
<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](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>
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;align-items:center;"
|
||||
aria-label="An elevated button.">
|
||||
<md-elevated-button>Elevated</md-elevated-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-elevated-button>Elevated</md-elevated-button>
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;align-items:center;"
|
||||
aria-label="A filled button.">
|
||||
<md-filled-button>Filled</md-filled-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-filled-button>Filled</md-filled-button>
|
||||
```
|
||||
|
||||
## Filled tonal button
|
||||
|
||||
<!-- go/md-filled-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.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;align-items:center;"
|
||||
aria-label="A tonal button.">
|
||||
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-filled-tonal-button>Tonal</md-filled-tonal-button>
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;align-items:center;"
|
||||
aria-label="An outlined button.">
|
||||
<md-outlined-button>Outlined</md-outlined-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-outlined-button>Outlined</md-outlined-button>
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- catalog-only-start -->
|
||||
|
||||
<!--
|
||||
|
||||
<div class="figure-wrapper">
|
||||
<figure
|
||||
style="justify-content:center;align-items:center;"
|
||||
aria-label="A text button.">
|
||||
<md-text-button>Text</md-text-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<md-text-button>Text</md-text-button>
|
||||
```
|
||||
|
||||
## Theming
|
||||
|
||||
Button supports [Material theming](../theming/README.md) and can be customized
|
||||
in terms of color, typography, and shape.
|
||||
|
||||
### Elevated button tokens
|
||||
|
||||
Token | Default 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`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-elevated-button.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Elevated button example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- 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-font: 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 -->
|
||||
|
||||
```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
|
||||
|
||||
Token | Default 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`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-button.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Filled button example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- 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-font: 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 -->
|
||||
|
||||
```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
|
||||
|
||||
Token | Default 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`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-filled-tonal-button.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Filled tonal button example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- 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-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>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```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
|
||||
|
||||
Token | Default 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`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-outlined-button.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Outlined button example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- 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-font: 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 -->
|
||||
|
||||
```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
|
||||
|
||||
Token | Default value
|
||||
----------------------------------- | -------------------------------------
|
||||
`--md-text-button-label-text-color` | `--md-sys-color-primary`
|
||||
`--md-text-button-label-text-font` | `--md-sys-typescale-label-large-font`
|
||||
|
||||
* [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-text-button.scss)
|
||||
<!-- {.external} -->
|
||||
|
||||
### Text button example
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
|
||||
|
||||
<!-- no-catalog-end -->
|
||||
<!-- 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-font: system-ui;
|
||||
--md-sys-color-primary: #006A6A;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-text-button>Text</md-text-button>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!-- catalog-only-end -->
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--md-text-button-label-text-font: system-ui;
|
||||
--md-sys-color-primary: #006A6A;
|
||||
}
|
||||
</style>
|
||||
|
||||
<md-text-button>Text</md-text-button>
|
||||
```
|
||||
|
||||
<!-- auto-generated API docs start -->
|
||||
|
||||
## API
|
||||
|
||||
|
||||
### MdElevatedButton <code><md-elevated-button></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
|
||||
| `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. |
|
||||
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
|
||||
| `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. |
|
||||
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
|
||||
| `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` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
### MdFilledButton <code><md-filled-button></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
|
||||
| `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. |
|
||||
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
|
||||
| `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. |
|
||||
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
|
||||
| `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` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
### MdFilledTonalButton <code><md-filled-tonal-button></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
|
||||
| `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. |
|
||||
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
|
||||
| `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. |
|
||||
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
|
||||
| `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` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
### MdOutlinedButton <code><md-outlined-button></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
|
||||
| `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. |
|
||||
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
|
||||
| `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. |
|
||||
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
|
||||
| `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` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
### MdTextButton <code><md-text-button></code>
|
||||
|
||||
#### Properties
|
||||
|
||||
<!-- mdformat off(autogenerated might break rendering in catalog) -->
|
||||
|
||||
| Property | Attribute | Type | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `disabled` | `disabled` | `boolean` | `false` | Whether or not the button is disabled. |
|
||||
| `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. |
|
||||
| `href` | `href` | `string` | `''` | The URL that the link button points to. |
|
||||
| `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. |
|
||||
| `type` | `type` | `string` | `'submit'` | The default behavior of the button. May be "button", "reset", or "submit" (default). |
|
||||
| `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` | |
|
||||
|
||||
<!-- mdformat on(autogenerated might break rendering in catalog) -->
|
||||
|
||||
<!-- auto-generated API docs end -->
|
||||
Loading…
Add table
Add a link
Reference in a new issue