按鈕

按鈕讓使用者透過單次點擊執行動作和做出選擇。

按鈕 API

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

透過閱讀這篇關於最小化套件大小的指南，了解差異。

原生元件的屬性也可用。

名稱	類型	預設	描述
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 }	{}	用於按鈕內每個 slot 的屬性。
slots	{ root?: elementType }	{}	用於按鈕內每個 slot 的元件。字串表示使用 HTML 元素，元件則表示使用 React 元件。請參閱下方的「Slots API」以了解更多詳細資訊。

ref 會轉發到 root 元素。

若要了解如何自訂 slot，請查看「覆寫元件結構」指南。

Slot 名稱	類別名稱	預設元件	描述
root	.base-Button-root	`props.href \|\| props.to ? 'a' : 'button'`	呈現 root 的元件。

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slot。

類別名稱	描述
.base--active	套用至 root `button` 元素的狀態類別，如果 `active={true}`。
.base--disabled	套用至 root `button` 元素的狀態類別，如果 `disabled={true}`。
.base--focusVisible	套用至 root `button` 元素的狀態類別，如果 `focusVisible={true}`。