按钮

按钮允许用户通过单击执行操作和做出选择。

按钮 API

import { Button } from '@mui/base/Button';
// or
import { Button } from '@mui/base';

原生组件的 Props 也可用。

名称	类型	默认值	描述
action	func \| { current?: { focusVisible: func } }	-	用于命令式操作的 ref。目前仅支持 `focusVisible()` 操作。
disabled	bool	false	如果为 `true`，则组件被禁用。
focusableWhenDisabled	bool	false	如果为 `true`，则允许禁用的按钮接收焦点。
rootElementName	string	'button'	最终渲染的 HTML 元素，例如 'button' 或 'a'
slotProps	{ root?: func \| object }	{}	用于按钮内部每个插槽的 props。
slots	{ root?: elementType }	{}	用于按钮内部每个插槽的组件。可以是用于 HTML 元素的字符串或组件。有关更多详细信息，请参阅下面的 Slots API。

ref 被转发到根元素。

要了解如何自定义插槽，请查看覆盖组件结构指南。

插槽名称	类名	默认组件	描述
root	.base-Button-root	`props.href \|\| props.to ? 'a' : 'button'`	渲染根元素的组件。

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们会被应用到组件的插槽。

类名	描述
.base--active	如果 `active={true}`，则应用于根 `button` 元素的状态类。
.base--disabled	如果 `disabled={true}`，则应用于根 `button` 元素的状态类。
.base--focusVisible	如果 `focusVisible={true}`，则应用于根 `button` 元素的状态类。