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

ButtonGroupAPI

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

範例

Import

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

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

Props

原生元件的 Props 也可使用。

名稱類型預設值描述
buttonFlexnumber
| string		-

按鈕的 flex 值。

childrennode-

如果未設定 src，則用於在 ButtonGroup 內呈現圖示或文字元素。這可以是元素，或僅僅是字串。

color'danger'
| 'neutral'
| 'primary'
| 'success'
| 'warning'
| string		'neutral'

元件的顏色。它支援適用於此元件的佈景主題顏色。

若要瞭解如何新增您自己的顏色，請查看主題元件—擴充顏色。

componentelementType-

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

disabledboolfalse

如果為 true，則所有按鈕都將停用。

orientation'horizontal'
| 'vertical'		'horizontal'

元件方向。

size'lg'
| 'md'
| 'sm'
| string		'md'

元件的大小。它接受 'sm' 和 'lg' 之間的佈景主題值。

若要瞭解如何將自訂大小新增至元件，請查看主題元件—擴充大小。

slotProps{ root?: func
| object }		{}

用於內部每個 slot 的 props。

slots{ root?: elementType }{}

用於內部每個 slot 的元件。

請參閱下方的Slots API以取得更多詳細資訊。

spacingArray<number
| string>
| number
| { lg?: number
| string, md?: number
| string, sm?: number
| string, xl?: number
| string, xs?: number
| string }
| string		0

定義 item 類型元件之間的間距。它只能在 container 類型元件上使用。

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

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

請參閱 `sx` 頁面以取得更多詳細資訊。

variant'outlined'
| 'plain'
| 'soft'
| 'solid'
| string		'outlined'

要使用的全域 variant。

若要瞭解如何新增您自己的 variants，請查看主題元件—擴充 variants。

ref 轉發到根元素。

佈景主題預設 props

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

Slots

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

Slot 名稱Class name預設元件描述
root.MuiButtonGroup-root'div'呈現 root 的元件。

CSS classes

這些 class names 對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slots。

Class nameRule name描述
.MuiButtonGroup-colorContextcolorContext當觸發顏色反轉時，套用至根元素的 Class name。
.MuiButtonGroup-colorDangercolorDanger如果 color="danger"，則套用至根元素的 Class name。
.MuiButtonGroup-colorNeutralcolorNeutral如果 color="neutral"，則套用至根元素的 Class name。
.MuiButtonGroup-colorPrimarycolorPrimary如果 color="primary"，則套用至根元素的 Class name。
.MuiButtonGroup-colorSuccesscolorSuccess如果 color="success"，則套用至根元素的 Class name。
.MuiButtonGroup-colorWarningcolorWarning如果 color="warning"，則套用至根元素的 Class name。
.MuiButtonGroup-horizontalhorizontal如果 orientation="horizontal"，則套用至根元素的 Class name。
.MuiButtonGroup-sizeLgsizeLg如果 size="lg"，則套用至根元素的 Class name。
.MuiButtonGroup-sizeMdsizeMd如果 size="md"，則套用至根元素的 Class name。
.MuiButtonGroup-sizeSmsizeSm如果 size="sm"，則套用至根元素的 Class name。
.MuiButtonGroup-variantOutlinedvariantOutlined如果 variant="outlined"，則套用至根元素的 Class name。
.MuiButtonGroup-variantPlainvariantPlain如果 variant="plain"，則套用至根元素的 Class name。
.MuiButtonGroup-variantSoftvariantSoft如果 variant="soft"，則套用至根元素的 Class name。
.MuiButtonGroup-variantSolidvariantSolid如果 variant="solid"，則套用至根元素的 Class name。
.MuiButtonGroup-verticalvertical如果 orientation="vertical"，則套用至根元素的 Class name。

您可以使用下列自訂選項之一覆寫元件的樣式

原始碼

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