按钮

操作按钮

交互式演示

Controlled

注意：color 不是官方 Material Design 3 的一部分。填充色调按钮的颜色始终为次要容器。轮廓按钮的颜色始终为轮廓变体。

配置

变体

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>

图标

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>

属性

名称 类型 默认值 描述
color 'primary' | 'secondary' | 'tertiary' 'primary' 按钮的颜色变体。
shape 'rounded' | 'square' 'rounded' 按钮的形状。
size 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' 'small' 按钮的尺寸。
trailingIcon Boolean false 图标是否显示在按钮末尾。
variant 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text' 'filled' 按钮的视觉样式变体。

切换按钮

交互式演示

Bookmark Bookmarked

用法

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>

属性

名称 类型 默认值 描述
color 'primary' | 'secondary' | 'tertiary' 'primary' 按钮的颜色变体。
shape 'rounded' | 'square' 'rounded' 按钮的形状。
size 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' 'small' 按钮的尺寸。
trailingIcon Boolean false 图标是否显示在按钮末尾。
variant 'filled' | 'tonal' | 'elevated' | 'outlined' 'filled' 按钮的视觉样式变体。