ToggleButtonAPI

React ToggleButton 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

範例

如需此 React 元件的使用範例和詳細資訊，請造訪元件示範頁面

Toggle Button

Import

import ToggleButton from '@mui/material/ToggleButton';
// or
import { ToggleButton } from '@mui/material';

閱讀關於最小化 bundle 大小的指南，以瞭解差異。

Props

ButtonBase 元件的 props 也可使用。

名稱	類型	預設值	描述
value*	any	-	當在 ToggleButtonGroup 中選取按鈕時，要與按鈕關聯的值。
children	node	-	元件的內容。
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方的CSS 類別 API 以瞭解更多詳細資訊。
color	'standard' \| 'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| string	'standard'	按鈕在啟用狀態時的顏色。它支援預設和自訂主題顏色，這些顏色可以按照調色盤自訂指南中所示的方式新增。
disabled	bool	false	若為 `true`，則元件會停用。
disableFocusRipple	bool	false	若為 `true`，則鍵盤焦點漣漪效果會停用。
disableRipple	bool	false	若為 `true`，則漣漪效果會停用。 ⚠️ 若沒有漣漪效果，預設情況下 :focus-visible 不會有樣式。請務必使用 `.Mui-focusVisible` 類別套用個別樣式來醒目提示元素。
fullWidth	bool	false	若為 `true`，則按鈕將佔用其容器的完整寬度。
onChange	func	-	狀態變更時觸發的回呼。簽名：`function(event: React.MouseEvent<htmlelement>, value: any) => void` `event` 回呼的事件來源。已選取按鈕的 `value`。
onClick	func	-	按鈕點擊時觸發的回呼。簽名：`function(event: React.MouseEvent<htmlelement>, value: any) => void` `event` 回呼的事件來源。已選取按鈕的 `value`。
selected	bool	-	若為 `true`，則按鈕會以啟用狀態呈現。
size	'small' \| 'medium' \| 'large' \| string	'medium'	元件的大小。此 prop 預設為從父 ToggleButtonGroup 元件繼承的值。
sx	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆寫以及其他 CSS 樣式的系統 prop。請參閱 `sx` 頁面以瞭解更多詳細資訊。

ref 會轉發到根元素。

繼承

雖然上面未明確記錄，但 ButtonBase 元件的 props 也可在 ToggleButton 中使用。您可以利用這一點來目標巢狀元件。

主題預設 props

您可以使用 MuiToggleButton 來透過主題變更此元件的預設 props。

CSS 類別

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

類別名稱	規則名稱	描述
.Mui-disabled		若 `disabled={true}`，則套用至根元素的狀態類別。
.Mui-selected		若 `selected={true}`，則套用至根元素的狀態類別。
.MuiToggleButton-fullWidth	fullWidth	若 `fullWidth={true}`，則套用至根元素的樣式。
.MuiToggleButton-primary	primary	若 `color="primary"`，則套用至根元素的狀態類別。
.MuiToggleButton-root	root	套用至根元素的樣式。
.MuiToggleButton-secondary	secondary	若 `color="secondary"`，則套用至根元素的狀態類別。
.MuiToggleButton-sizeLarge	sizeLarge	若 `size="large"`，則套用至根元素的樣式。
.MuiToggleButton-sizeMedium	sizeMedium	若 `size="medium"`，則套用至根元素的樣式。
.MuiToggleButton-sizeSmall	sizeSmall	若 `size="small"`，則套用至根元素的樣式。
.MuiToggleButton-standard	standard	若 `color="standard"`，則套用至根元素的狀態類別。

您可以使用以下其中一種自訂選項來覆寫元件的樣式

使用全域類別名稱。
使用規則名稱作為自訂主題中元件styleOverrides 屬性的一部分。

原始碼

如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。