Button Action Button Interactive Demo Configurations Variants Icons Properties Toggle Button Interactive Demo Usage Properties
Controlled Label
Size
xsmall
small
medium
large
xlarge Shape
rounded
square Variant
filled
tonal
elevated
outlined
text Color
primary
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
Outlined
Text<md-button>Filled</md-button>
<md-button variant="tonal">Tonal</md-button>
<md-button variant="elevated">
<iconify-icon slot="icon" icon="material-symbols:search"></iconify-icon>
Elevated
</md-button>
<md-button variant="outlined">Outlined</md-button>
<md-button variant="text">Text</md-button>
Send
Open<md-button variant="tonal">
Send
<iconify-icon slot="icon" icon="material-symbols:send"></iconify-icon>
</md-button>
<md-button variant="text" trailing-icon>
Open
<iconify-icon slot="icon" icon="material-symbols:open-in-new"></iconify-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.
Bookmark Bookmarked Variant
filled
tonal
elevated
outlined Shape
rounded
square Size
xsmall
small
medium
large
xlarge Color
primary
secondary
tertiary Disabled
Stop Start
<div
style="display: flex; align-items: center; justify-content: center; gap: 8px;"
>
<md-icon-button variant="tonal" width="narrow" aria-label="Pause">
<iconify-icon icon="material-symbols:pause"></iconify-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">
<iconify-icon icon="material-symbols:replay"></iconify-icon>
</md-icon-button>
</div>
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''filled'The visual style variant of the button.