Button Action Button Interactive Demo Configurations Varients Icon Properties Methods Toggle Button Interactive Demo Usage Properties Events search Controlled Label Sizexsmall small medium large xlarge Shaperounded square Variantfilled tonal elevated outlined text Colorprimary secondary tertiary Disabled Trailing Icon Note: color is not part of the official Material Design 3. Color of tonal buttons is always secondary container. Color of outlined buttons is always on outline variant.
Filled Tonal search ElevatedOutlined Text <md-button>Filled</md-button>
<md-button variant="tonal">Tonal</md-button>
<md-button variant="elevated">
<md-icon slot="icon">search</md-icon>
Elevated
</md-button>
<md-button variant="outlined">Outlined</md-button>
<md-button variant="text">Text</md-button>
Sendsend Openopen_in_new <md-button variant="tonal">
Send
<md-icon slot="icon">send</md-icon>
</md-button>
<md-button variant="text" trailingicon>
Open
<md-icon slot="icon">open_in_new</md-icon>
</md-button>
Name Type Default Description color'primary' | 'secondary' | 'tertiary''primary'The color variant of the button. shape'rounded' | 'square''rounded'The shape of the button. size'xsmall' | 'small' | 'medium' | 'large' | 'xlarge''small'The size of the button. trailingIconBoolean falseWhether the icon is displayed at the end of the button. variant'filled' | 'tonal' | 'elevated' | 'outlined' | 'text''filled'The visual style variant of the button. type'button' | 'submit' | 'reset''button'The button type (inherited from Button). disabledBoolean falseWhether the button is disabled (inherited from FormAssociated).
Inherits all standard HTMLElement methods. Use click() to programmatically trigger the button.
bookmark bookmark Bookmark Bookmarked Variantfilled tonal elevated outlined Shaperounded square Sizexsmall small medium large xlarge Colorprimary secondary tertiary Disabled pause Stop Start replay
<div style="display: flex; align-items: center; justify-content: center; gap: 8px;">
<md-icon-button variant="tonal" width="narrow" aria-label="Pause">
<md-icon>pause</md-icon>
</md-icon-button>
<md-button-toggle size="medium" checked>
<span>Stop</span>
<span slot="checked">Start</span>
</md-button-toggle>
<md-icon-button variant="outlined" width="narrow" aria-label="Restart">
<md-icon>replay</md-icon>
</md-icon-button>
</div>
Name Type Default Description checkedBoolean falseWhether the button is in the checked state (inherited from Switch). color'primary' | 'secondary' | 'tertiary''primary'The color variant of the button. shape'rounded' | 'square''rounded'The shape of the button. size'xsmall' | 'small' | 'medium' | 'large' | 'xlarge''small'The size of the button. trailingIconBoolean falseWhether the icon is displayed at the end of the button. variant'filled' | 'tonal' | 'elevated' | 'outlined''filled'The visual style variant of the button. type'button' | 'submit' | 'reset''button'The button type (inherited from Button). disabledBoolean falseWhether the button is disabled (inherited from FormAssociated).
Name Type Description changeCustomEvent<boolean>Dispatched when the checked state changes. The detail property contains the new checked state.