Button

Action Button

Interactive Demo

Controlled

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.

Configurations

Variants

Filled Tonal Elevated 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>

Icons

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>

Properties

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.
trailingIcon Boolean false Whether the icon is displayed at the end of the button.
variant 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text' 'filled' The visual style variant of the button.

Toggle Button

Interactive Demo

Bookmark Bookmarked

Usage

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>

Properties

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.
trailingIcon Boolean false Whether the icon is displayed at the end of the button.
variant 'filled' | 'tonal' | 'elevated' | 'outlined' 'filled' The visual style variant of the button.