按钮

操作按钮

交互式演示

Controlled

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

配置

变体

FilledTonalElevatedOutlinedText
<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>

图标

SendOpen
<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'按钮的尺寸。
trailingIconBooleanfalse图标是否显示在按钮末尾。
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'按钮的尺寸。
trailingIconBooleanfalse图标是否显示在按钮末尾。
variant'filled' | 'tonal' | 'elevated' | 'outlined''filled'按钮的视觉样式变体。