按钮
按钮用于触发主要、次要或低强调操作，并采用 Material 3 视觉样式。
操作组件会将 title 转换为组件库的工具提示。有关共同行为，请参阅操作工具提示。
当操作层级不明确时，text 是稳妥的默认样式。只有在某个表面或操作组中唯一的主要流程完成操作才使用 filled。重要的次要操作使用 outlined；需要比描边样式更醒目时使用 tonal。
示例
默认
变体
尺寸
size 属性优先于子树和应用默认值，内置回退值为 small。应用级尺寸通过 buttonDefaults.size 设置；子树可在 setup 中调用 provideButtonDefaults()。详见组件默认值。
pressShapeMorph 的应用默认值为 true，可通过 buttonDefaults.pressShapeMorph 或 provideButtonDefaults() 覆盖。ButtonGroup 未显式设置该字段时会继承父级 Button context；单个 Button 的显式属性优先级最高。
形状
禁用
可切换
前置图标
leadingIcon 属性和 leading 插槽采用相同的图标尺寸与标签间距。需要自定义图标内容的呈现方式时，请使用插槽。
尾随图标
trailingIcon 属性和 trailing 插槽遵循相同的尾随对齐规则。
工具提示
简单的文本工具提示可通过 title 设置。
Vue Router
使用 RouterLink custom，并将其 href 和 navigate 值传给 Button。这样最终的锚点元素仍由 Button 负责渲染。
参考
结构
| 元素 | 部件 | 选择器 |
|---|---|---|
<component> | root | [data-scope="button"][data-part="root"]鼠标左键单击复制 |
<span> | leading条件显示 | [data-scope="button"][data-part="leading"]鼠标左键单击复制 |
<span> | trailing条件显示 | [data-scope="button"][data-part="trailing"]鼠标左键单击复制 |
属性
| 名称 | 说明 | 默认值 | 控件 |
|---|---|---|---|
toggleable可选 | Whether the button is toggleable (like a checkbox). When true, the button must contain an input element of type checkbox or radio. boolean | undefined | undefined | |
variant可选 | The visual emphasis of the button. textoutlinedtonalfilledelevated | - | |
size可选 | The size of the button. smalllargeextra-smallmediumextra-large | - | |
shape可选 | The shape of the button. M3Shape | undefined | - | - |
pressShapeMorph可选 | Whether pressed-state shape morphing is enabled. boolean | undefined | undefined | |
href可选 | The href attribute. If provided, the button will be rendered as an anchor element. string | undefined | - | |
leadingIcon可选 | Name of the leading icon. string | undefined | - | |
trailingIcon可选 | Name of the trailing icon. string | undefined | - | |
disabled可选 | Whether the button is disabled. boolean | undefined | undefined |
插槽3
| 名称 | 参数 | 说明 |
|---|---|---|
leading | - | Slot for leading content, such as an icon. Receives `disabled` as a prop. Will not be used if `leadingIcon` prop is set. |
default | - | Default slot for the main content of the button. Receives `disabled` as a prop. |
trailing | - | Slot for trailing content, such as an icon. Receives `disabled` as a prop. Will not be used if `trailingIcon` prop is set. |
样式123
| Token | 说明 |
|---|---|
--md-button-container-colorColor回退值 var(--md-sys-color-primary) | Controls container color. |
--md-button-container-elevationElevation回退值 var(--md-sys-elevation-level0) | Controls container elevation. |
--md-button-container-shapeShape回退值 var(--md-button-container-shape-round,var(--md-shape-action)) | Controls container shape. |
--md-button-container-shape-roundShape回退值 var(--md-shape-action) | Controls container shape round. |
--md-button-container-shape-squareShape回退值 var(--md-shape-action-square-small) | Controls container shape square. |
--md-button-disabled-container-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls disabled container color. |
--md-button-disabled-container-elevationDisabled回退值 var(--md-sys-elevation-level0) | Controls disabled container elevation. |
--md-button-disabled-label-text-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls disabled label text color. |
--md-button-elevated-container-colorColor回退值 var(--md-sys-color-surface-container-low) | Controls elevated container color. |
--md-button-elevated-container-elevationElevation回退值 var(--md-sys-elevation-level1) | Controls elevated container elevation. |
--md-button-elevated-disabled-container-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls elevated disabled container color. |
--md-button-elevated-disabled-container-elevationDisabled回退值 var(--md-sys-elevation-level0) | Controls elevated disabled container elevation. |
--md-button-elevated-disabled-label-text-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls elevated disabled label text color. |
--md-button-elevated-focused-container-elevationFocus回退值 var(--md-sys-elevation-level1) | Controls elevated focused container elevation. |
--md-button-elevated-focused-label-text-colorFocus回退值 var(--md-sys-color-primary) | Controls elevated focused label text color. |
--md-button-elevated-hovered-container-elevationElevation回退值 var(--md-sys-elevation-level2) | Controls elevated hovered container elevation. |
--md-button-elevated-hovered-label-text-colorState回退值 var(--md-sys-color-primary) | Controls elevated hovered label text color. |
--md-button-elevated-label-text-colorColor回退值 var(--md-sys-color-primary) | Controls elevated label text color. |
--md-button-elevated-pressed-container-elevationElevation回退值 var(--md-sys-elevation-level1) | Controls elevated pressed container elevation. |
--md-button-elevated-pressed-label-text-colorState回退值 var(--md-sys-color-primary) | Controls elevated pressed label text color. |
--md-button-elevated-selected-container-colorState回退值 var(--md-sys-color-primary) | Controls elevated selected container color. |
--md-button-elevated-selected-label-text-colorState回退值 var(--md-sys-color-on-primary) | Controls elevated selected label text color. |
--md-button-elevated-unselected-container-colorState回退值 var(--md-sys-color-surface-container-low) | Controls elevated unselected container color. |
--md-button-elevated-unselected-label-text-colorState回退值 var(--md-sys-color-primary) | Controls elevated unselected label text color. |
--md-button-filled-container-colorColor回退值 var(--md-sys-color-primary) | Controls filled container color. |
--md-button-filled-container-elevationElevation回退值 var(--md-sys-elevation-level0) | Controls filled container elevation. |
--md-button-filled-disabled-container-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls filled disabled container color. |
--md-button-filled-disabled-container-elevationDisabled回退值 var(--md-sys-elevation-level0) | Controls filled disabled container elevation. |
--md-button-filled-disabled-label-text-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls filled disabled label text color. |
--md-button-filled-focused-container-elevationFocus回退值 var(--md-sys-elevation-level0) | Controls filled focused container elevation. |
--md-button-filled-focused-label-text-colorFocus回退值 var(--md-sys-color-on-primary) | Controls filled focused label text color. |
--md-button-filled-hovered-container-elevationElevation回退值 var(--md-sys-elevation-level1) | Controls filled hovered container elevation. |
--md-button-filled-hovered-label-text-colorState回退值 var(--md-sys-color-on-primary) | Controls filled hovered label text color. |
--md-button-filled-label-text-colorColor回退值 var(--md-sys-color-on-primary) | Controls filled label text color. |
--md-button-filled-pressed-container-elevationElevation回退值 var(--md-sys-elevation-level0) | Controls filled pressed container elevation. |
--md-button-filled-pressed-label-text-colorState回退值 var(--md-sys-color-on-primary) | Controls filled pressed label text color. |
--md-button-filled-selected-container-colorState回退值 var(--md-sys-color-primary) | Controls filled selected container color. |
--md-button-filled-selected-label-text-colorState回退值 var(--md-sys-color-on-primary) | Controls filled selected label text color. |
--md-button-filled-unselected-container-colorState回退值 var(--md-sys-color-surface-container) | Controls filled unselected container color. |
--md-button-filled-unselected-label-text-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls filled unselected label text color. |
--md-button-focus-indicator-colorFocus回退值 var(--md-sys-color-secondary) | Controls focus indicator color. |
--md-button-focus-indicator-outline-offsetFocus回退值 var(--md-sys-state-focus-indicator-outer-offset) | Controls focus indicator outline offset. |
--md-button-focus-indicator-thicknessFocus回退值 var(--md-sys-state-focus-indicator-thickness) | Controls focus indicator thickness. |
--md-button-focused-container-elevationFocus回退值 var(--md-sys-elevation-level0) | Controls focused container elevation. |
--md-button-focused-label-text-colorFocus回退值 var(--md-sys-color-on-primary) | Controls focused label text color. |
--md-button-hovered-container-elevationElevation回退值 var(--md-button-elevated-hovered-container-elevation,var(--md-sys-elevation-level2)) | Controls hovered container elevation. |
--md-button-hovered-label-text-colorState回退值 var(--md-sys-color-on-primary) | Controls hovered label text color. |
--md-button-icon-label-spaceLayout回退值 0.5rem | Controls icon label space. |
--md-button-icon-sizeLayout回退值 Typography, density and icon scale (default reference: 1.25rem) | Controls icon size. |
--md-button-label-text-colorColor回退值 var(--md-sys-color-on-primary) | Controls label text color. |
--md-button-label-text-selected-colorState回退值 var(--md-sys-color-on-primary) | Controls label text selected color. |
--md-button-label-text-unselected-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls label text unselected color. |
--md-button-large-container-shape-squareShape回退值 var(--md-shape-action-square-large) | Controls large container shape square. |
--md-button-large-icon-label-spaceLayout回退值 0.75rem | Controls large icon label space. |
--md-button-large-icon-sizeLayout回退值 Typography, density and icon scale (default reference: 2rem) | Controls large icon size. |
--md-button-large-outlined-outline-widthLayout回退值 0.125rem | Controls large outlined outline width. |
--md-button-large-pressed-container-shapeShape回退值 var(--md-shape-action-pressed-large) | Controls large pressed container shape. |
--md-button-large-selected-container-shape-roundShape回退值 var(--md-shape-action-selected-large) | Controls large selected container shape round. |
--md-button-medium-container-shape-squareShape回退值 var(--md-shape-action-square-medium) | Controls medium container shape square. |
--md-button-medium-icon-label-spaceLayout回退值 0.5rem | Controls medium icon label space. |
--md-button-medium-icon-sizeLayout回退值 Typography, density and icon scale (default reference: 1.5rem) | Controls medium icon size. |
--md-button-medium-outlined-outline-widthLayout回退值 0.0625rem | Controls medium outlined outline width. |
--md-button-medium-pressed-container-shapeShape回退值 var(--md-shape-action-pressed-medium) | Controls medium pressed container shape. |
--md-button-medium-selected-container-shape-roundShape回退值 var(--md-shape-action-selected-medium) | Controls medium selected container shape round. |
--md-button-outlined-disabled-label-text-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls outlined disabled label text color. |
--md-button-outlined-focused-label-text-colorFocus回退值 var(--md-sys-color-on-surface-variant) | Controls outlined focused label text color. |
--md-button-outlined-hovered-label-text-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls outlined hovered label text color. |
--md-button-outlined-label-text-colorColor回退值 var(--md-sys-color-on-surface-variant) | Controls outlined label text color. |
--md-button-outlined-outline-colorColor回退值 var(--md-sys-color-outline-variant) | Controls outlined outline color. |
--md-button-outlined-pressed-label-text-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls outlined pressed label text color. |
--md-button-outlined-selected-container-colorState回退值 var(--md-sys-color-inverse-surface) | Controls outlined selected container color. |
--md-button-outlined-selected-label-text-colorState回退值 var(--md-sys-color-inverse-on-surface) | Controls outlined selected label text color. |
--md-button-outlined-unselected-label-text-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls outlined unselected label text color. |
--md-button-pressed-container-elevationElevation回退值 var(--md-sys-elevation-level0) | Controls pressed container elevation. |
--md-button-pressed-container-shapeShape回退值 var(--md-shape-action-pressed-small) | Controls pressed container shape. |
--md-button-pressed-label-text-colorState回退值 var(--md-sys-color-on-primary) | Controls pressed label text color. |
--md-button-selected-container-colorState回退值 var(--md-sys-color-primary) | Controls selected container color. |
--md-button-selected-container-shapeShape回退值 var(--md-button-xsmall-selected-container-shape-round,var(--md-shape-action-selected-small)) | Controls selected container shape. |
--md-button-selected-label-text-colorState回退值 var(--md-button-elevated-selected-label-text-color,var(--md-sys-color-on-primary)) | Controls selected label text color. |
--md-button-small-container-shape-squareShape回退值 var(--md-shape-action-square-small) | Controls small container shape square. |
--md-button-small-icon-label-spaceLayout回退值 0.5rem | Controls small icon label space. |
--md-button-small-icon-sizeLayout回退值 Typography, density and icon scale (default reference: 1.25rem) | Controls small icon size. |
--md-button-small-outlined-outline-widthLayout回退值 0.0625rem | Controls small outlined outline width. |
--md-button-small-pressed-container-shapeShape回退值 var(--md-shape-action-pressed-small) | Controls small pressed container shape. |
--md-button-small-selected-container-shape-roundShape回退值 var(--md-shape-action-selected-small) | Controls small selected container shape round. |
--md-button-text-disabled-label-text-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls text disabled label text color. |
--md-button-text-focused-label-text-colorFocus回退值 var(--md-sys-color-primary) | Controls text focused label text color. |
--md-button-text-hovered-label-text-colorState回退值 var(--md-sys-color-primary) | Controls text hovered label text color. |
--md-button-text-label-text-colorColor回退值 var(--md-sys-color-primary) | Controls text label text color. |
--md-button-text-pressed-label-text-colorState回退值 var(--md-sys-color-primary) | Controls text pressed label text color. |
--md-button-tonal-container-colorColor回退值 var(--md-sys-color-secondary-container) | Controls tonal container color. |
--md-button-tonal-container-elevationElevation回退值 var(--md-sys-elevation-level0) | Controls tonal container elevation. |
--md-button-tonal-disabled-container-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls tonal disabled container color. |
--md-button-tonal-disabled-container-elevationDisabled回退值 var(--md-sys-elevation-level0) | Controls tonal disabled container elevation. |
--md-button-tonal-disabled-label-text-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls tonal disabled label text color. |
--md-button-tonal-focused-container-elevationFocus回退值 var(--md-sys-elevation-level0) | Controls tonal focused container elevation. |
--md-button-tonal-focused-label-text-colorFocus回退值 var(--md-sys-color-on-secondary-container) | Controls tonal focused label text color. |
--md-button-tonal-hovered-container-elevationElevation回退值 var(--md-sys-elevation-level1) | Controls tonal hovered container elevation. |
--md-button-tonal-hovered-label-text-colorState回退值 var(--md-sys-color-on-secondary-container) | Controls tonal hovered label text color. |
--md-button-tonal-label-text-colorColor回退值 var(--md-sys-color-on-secondary-container) | Controls tonal label text color. |
--md-button-tonal-pressed-container-elevationElevation回退值 var(--md-sys-elevation-level0) | Controls tonal pressed container elevation. |
--md-button-tonal-pressed-label-text-colorState回退值 var(--md-sys-color-on-secondary-container) | Controls tonal pressed label text color. |
--md-button-tonal-selected-container-colorState回退值 var(--md-sys-color-secondary) | Controls tonal selected container color. |
--md-button-tonal-selected-label-text-colorState回退值 var(--md-sys-color-on-secondary) | Controls tonal selected label text color. |
--md-button-tonal-unselected-container-colorState回退值 var(--md-sys-color-secondary-container) | Controls tonal unselected container color. |
--md-button-tonal-unselected-label-text-colorState回退值 var(--md-sys-color-on-secondary-container) | Controls tonal unselected label text color. |
--md-button-unselected-container-colorState回退值 var(--md-sys-color-surface-container) | Controls unselected container color. |
--md-button-unselected-focused-label-text-colorFocus回退值 var(--md-sys-color-on-surface-variant) | Controls unselected focused label text color. |
--md-button-unselected-hovered-label-text-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls unselected hovered label text color. |
--md-button-unselected-label-text-colorState回退值 var(--md-button-elevated-unselected-label-text-color,var(--md-sys-color-primary)) | Controls unselected label text color. |
--md-button-unselected-pressed-label-text-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls unselected pressed label text color. |
--md-button-xlarge-container-shape-squareShape回退值 var(--md-shape-action-square-large) | Controls xlarge container shape square. |
--md-button-xlarge-icon-label-spaceLayout回退值 1rem | Controls xlarge icon label space. |
--md-button-xlarge-icon-sizeLayout回退值 Typography, density and icon scale (default reference: 2.5rem) | Controls xlarge icon size. |
--md-button-xlarge-outlined-outline-widthLayout回退值 0.1875rem | Controls xlarge outlined outline width. |
--md-button-xlarge-pressed-container-shapeShape回退值 var(--md-shape-action-pressed-large) | Controls xlarge pressed container shape. |
--md-button-xlarge-selected-container-shape-roundShape回退值 var(--md-shape-action-selected-large) | Controls xlarge selected container shape round. |
--md-button-xsmall-container-shape-squareShape回退值 var(--md-shape-action-square-small) | Controls xsmall container shape square. |
--md-button-xsmall-icon-label-spaceLayout回退值 0.5rem | Controls xsmall icon label space. |
--md-button-xsmall-icon-sizeLayout回退值 Typography, density and icon scale (default reference: 1.25rem) | Controls xsmall icon size. |
--md-button-xsmall-outlined-outline-widthLayout回退值 0.0625rem | Controls xsmall outlined outline width. |
--md-button-xsmall-pressed-container-shapeShape回退值 var(--md-shape-action-pressed-small) | Controls xsmall pressed container shape. |
--md-button-xsmall-selected-container-shape-roundShape回退值 var(--md-shape-action-selected-small) | Controls xsmall selected container shape round. |