跳到主要內容跳到主要內容
🚀 影響 Material UI 2025 年的藍圖！參與最新的開發者問卷調查

按鈕群組API

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

範例

匯入

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

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

Props

原生元件的 Props 也可使用。

名稱類型預設描述
childrennode-

元件的內容。

classesobject-

覆寫或擴展應用於元件的樣式。

請參閱下方的CSS 類別 API 以了解更多詳細資訊。

color'inherit'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string		'primary'

元件的顏色。它支援預設和自訂主題顏色，可以按照調色盤客製化指南中所示的方式新增。

componentelementType-

用於根節點的元件。可以是字串（用於 HTML 元素）或元件。

disabledboolfalse

如果為 true，則元件會停用。

disableElevationboolfalse

如果為 true，則不使用陰影。

disableFocusRippleboolfalse

如果為 true，則按鈕鍵盤焦點漣漪效果會停用。

disableRippleboolfalse

如果為 true，則按鈕漣漪效果會停用。

fullWidthboolfalse

如果為 true，則按鈕將佔滿其容器的完整寬度。

orientation'horizontal'
| 'vertical'		'horizontal'

元件方向（版面配置流動方向）。

size'small'
| 'medium'
| 'large'
| string		'medium'

元件的大小。small 等同於 dense 按鈕樣式。

sxArray<func
| object
| bool>
| func
| object		-

系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。

請參閱 sx 頁面以了解更多詳細資訊。

variant'contained'
| 'outlined'
| 'text'
| string		'outlined'

要使用的 variant。

ref 會轉發到根元素。

主題預設 Props

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

CSS 類別

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

類別名稱規則名稱描述
.Mui-disabled如果 disabled={true}，則套用至子元素的狀態類別。
.MuiButtonGroup-colorPrimarycolorPrimary如果 color="primary"，則套用至根元素的樣式
.MuiButtonGroup-colorSecondarycolorSecondary如果 color="secondary"，則套用至根元素的樣式
.MuiButtonGroup-containedcontained如果 variant="contained"，則套用至根元素的樣式。
.MuiButtonGroup-disableElevationdisableElevationStyles applied to the root element if disableElevation={true}.
.MuiButtonGroup-firstButtonfirstButton套用至按鈕群組中第一個按鈕的樣式。
.MuiButtonGroup-fullWidthfullWidth如果 fullWidth={true}，則套用至根元素的樣式。
.MuiButtonGroup-groupedgrouped套用至子元素的樣式。
.MuiButtonGroup-groupedContainedgroupedContained如果 variant="contained"，則套用至子元素的樣式。
.MuiButtonGroup-groupedContainedHorizontalgroupedContainedHorizontal如果 variant="contained" 且 orientation="horizontal"，則套用至子元素的樣式。
.MuiButtonGroup-groupedContainedPrimarygroupedContainedPrimary如果 variant="contained" 且 color="primary"，則套用至子元素的樣式。
.MuiButtonGroup-groupedContainedSecondarygroupedContainedSecondary如果 variant="contained" 且 color="secondary"，則套用至子元素的樣式。
.MuiButtonGroup-groupedContainedVerticalgroupedContainedVertical如果 variant="contained" 且 orientation="vertical"，則套用至子元素的樣式。
.MuiButtonGroup-groupedHorizontalgroupedHorizontal如果 orientation="horizontal"，則套用至子元素的樣式。
.MuiButtonGroup-groupedOutlinedgroupedOutlined如果 variant="outlined"，則套用至子元素的樣式。
.MuiButtonGroup-groupedOutlinedHorizontalgroupedOutlinedHorizontal如果 variant="outlined" 且 orientation="horizontal"，則套用至子元素的樣式。
.MuiButtonGroup-groupedOutlinedPrimarygroupedOutlinedPrimary如果 variant="outlined" 且 color="primary"，則套用至子元素的樣式。
.MuiButtonGroup-groupedOutlinedSecondarygroupedOutlinedSecondary如果 variant="outlined" 且 color="secondary"，則套用至子元素的樣式。
.MuiButtonGroup-groupedOutlinedVerticalgroupedOutlinedVertical如果 variant="outlined" 且 orientation="vertical"，則套用至子元素的樣式。
.MuiButtonGroup-groupedTextgroupedText如果 variant="text"，則套用至子元素的樣式。
.MuiButtonGroup-groupedTextHorizontalgroupedTextHorizontal如果 variant="text" 且 orientation="horizontal"，則套用至子元素的樣式。
.MuiButtonGroup-groupedTextPrimarygroupedTextPrimary如果 variant="text" 且 color="primary"，則套用至子元素的樣式。
.MuiButtonGroup-groupedTextSecondarygroupedTextSecondary如果 variant="text" 且 color="secondary"，則套用至子元素的樣式。
.MuiButtonGroup-groupedTextVerticalgroupedTextVertical如果 variant="text" 且 orientation="vertical"，則套用至子元素的樣式。
.MuiButtonGroup-groupedVerticalgroupedVertical如果 orientation="vertical"，則套用至子元素的樣式。
.MuiButtonGroup-horizontalhorizontal如果 orientation="horizontal"，則套用至根元素的樣式。
.MuiButtonGroup-lastButtonlastButton套用至按鈕群組中最後一個按鈕的樣式。
.MuiButtonGroup-middleButtonmiddleButton套用至按鈕群組中間按鈕的樣式。
.MuiButtonGroup-outlinedoutlined如果 variant="outlined"，則套用至根元素的樣式。
.MuiButtonGroup-rootroot套用至根元素的樣式。
.MuiButtonGroup-texttext如果 variant="text"，則套用至根元素的樣式。
.MuiButtonGroup-verticalvertical如果 orientation="vertical"，則套用至根元素的樣式。

您可以使用下列其中一種客製化選項來覆寫元件的樣式

原始碼

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