Material Web Playground

code

Button

An interactive button with a range of presentation options.

Resources

Demos

Default

From 1.0.0-pre.5, FABs no longer support specifying the disabled attribute.

Learn moreopen_in_new
Elevated Filled Outlined Text Tonal add add add

With icons

Send Open

Theming

Elevated Filled Outlined Text Tonal

Properties used:

Elevated styles 
/* Elevated styles */
--md-elevated-button-container-shape: 0px;
--md-elevated-button-label-text-type: 500 0.875rem/1.25rem system-ui;
Filled styles 
/* Filled styles */
--md-filled-button-container-shape: 0px;
--md-filled-button-label-text-type: 500 0.875rem/1.25rem system-ui;
Outlined styles 
/* Outlined styles */
--md-outlined-button-container-shape: 0px;
--md-outlined-button-label-text-type: 500 0.875rem/1.25rem system-ui;
Text styles 
/* Text styles */
--md-text-button-container-shape: 0px;
--md-text-button-label-text-type: 500 0.875rem/1.25rem system-ui;
Tonal styles 
/* Tonal styles */
--md-tonal-button-container-shape: 0px;
--md-tonal-button-label-text-type: 500 0.875rem/1.25rem system-ui;
Theming 
/* Theming */
--md-sys-color-secondary-container: #CCE8E7;
--md-sys-color-on-secondary-container: #051F1F;
--md-sys-color-primary: #006A6A;
--md-sys-color-on-primary: #FFFFFF;
--md-sys-color-surface: #FAFDFC;
--md-sys-color-on-surface: #191C1C;
--md-sys-color-outline: #6F7979;