按鈕API
React 按鈕元件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。
示範
導入
import Button from '@mui/joy/Button';
// or
import { Button } from '@mui/joy';閱讀這份關於最小化 bundle 大小的指南，以了解差異。
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| action | func (函式) | { current?: { focusVisible: func } } | - | 用於命令式操作的 ref。目前僅支援 |
| color (顏色) | 'danger' (危險) | 'neutral' (中性) | 'primary' (主要) | 'success' (成功) | 'warning' (警告) | string (字串) | 'primary' (主要) | 元件的顏色。它支援適用於此元件的 theme 顏色。 若要了解如何新增自己的顏色，請查看 Themed components—Extend colors。 |
| component (元件) | elementType (元件類型) | - | 用於根節點的元件。可以是字串 (用於 HTML 元素) 或元件。 |
| disabled (禁用) | bool (布林值) | false (否) | 若為 |
| endDecorator (尾端裝飾) | node (節點) | - | 放置在子元素之後的元素。 |
| fullWidth (全寬) | bool (布林值) | false (否) | 若為 |
| loading (載入中) | bool (布林值) | false (否) | 若為 |
| loadingIndicator (載入指示器) | node (節點) | <CircularProgress /> | 節點應包含一個帶有 |
| loadingPosition (載入位置) | 'center' (置中) | 'end' (尾端) | 'start' (起始) | 'center' (置中) | 載入指示器可以放置在按鈕的起始、尾端或置中位置。 |
| size (尺寸) | 'sm' (小) | 'md' (中) | 'lg' (大) | string (字串) | 'md' (中) | 元件的尺寸。 若要了解如何為元件新增自訂尺寸，請查看 Themed components—Extend sizes。 |
| slotProps (插槽 Props) | { endDecorator?: func | object, loadingIndicatorCenter?: func | object, root?: func | object, startDecorator?: func | object } | {} | 用於每個內部插槽的 props。 |
| slots (插槽) | { endDecorator?: elementType, loadingIndicatorCenter?: elementType, root?: elementType, startDecorator?: elementType } | {} | 用於每個內部插槽的元件。 有關更多詳細資訊，請參閱下方的 Slots API。 |
| startDecorator (前端裝飾) | node (節點) | - | 放置在子元素之前的元素。 |
| sx (sx 樣式) | Array<func | object | bool> | func | object | - | 系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。 有關更多詳細資訊，請參閱 `sx` 頁面。 |
| variant (變體) | 'outlined' (外框) | 'plain' (樸素) | 'soft' (柔和) | 'solid' (實心) | string (字串) | 'solid' (實心) | 要使用的全域變體。 若要了解如何新增自己的變體，請查看 Themed components—Extend variants。 |
Theme 預設 props
您可以使用 `JoyButton` 透過 theme 變更此元件的預設 props。
若要了解如何自訂插槽，請查看 Overriding component structure 指南。
| 插槽名稱 | 類別名稱 | 預設元件 | 描述 |
|---|---|---|---|
| root (根) | .MuiButton-root | 'button' | 呈現根的元件。 |
| startDecorator (前端裝飾) | .MuiButton-startDecorator | 'span' | 呈現前端裝飾的元件。 |
| endDecorator (尾端裝飾) | .MuiButton-endDecorator | 'span' | 呈現尾端裝飾的元件。 |
| loadingIndicatorCenter (置中載入指示器) | .MuiButton-loadingIndicatorCenter | 'span' | 呈現置中載入指示器的元件。 |
這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於元件的插槽。
| 類別名稱 | 規則名稱 | 描述 |
|---|---|---|
| .Mui-disabled | 如果 disabled={true}，則狀態類別會應用於根元素。 | |
| .Mui-focusVisible | 如果按鈕是鍵盤焦點，則狀態類別會應用於 ButtonBase 根元素。 | |
| .MuiButton-colorContext | colorContext (顏色上下文) | 當觸發顏色反轉時，類別名稱會應用於根元素。 |
| .MuiButton-colorDanger | colorDanger (危險顏色) | 如果 color="danger"，則類別名稱會應用於根元素。 |
| .MuiButton-colorNeutral | colorNeutral (中性顏色) | 如果 color="neutral"，則類別名稱會應用於根元素。 |
| .MuiButton-colorPrimary | colorPrimary (主要顏色) | 如果 color="primary"，則類別名稱會應用於根元素。 |
| .MuiButton-colorSuccess | colorSuccess (成功顏色) | 如果 color="success"，則類別名稱會應用於根元素。 |
| .MuiButton-colorWarning | colorWarning (警告顏色) | 如果 color="warning"，則類別名稱會應用於根元素。 |
| .MuiButton-fullWidth | fullWidth (全寬) | 如果 fullWidth={true}，則類別名稱會應用於根元素。 |
| .MuiButton-loading | loading (載入中) | 如果 loading={true}，則類別名稱會應用於根元素。 |
| .MuiButton-sizeLg | sizeLg (大尺寸) | 如果 size="lg"，則類別名稱會應用於根元素。 |
| .MuiButton-sizeMd | sizeMd (中尺寸) | 如果 size="md"，則類別名稱會應用於根元素。 |
| .MuiButton-sizeSm | sizeSm (小尺寸) | 如果 size="sm"，則類別名稱會應用於根元素。 |
| .MuiButton-variantOutlined | variantOutlined (外框變體) | 如果 variant="outlined"，則類別名稱會應用於根元素。 |
| .MuiButton-variantPlain | variantPlain (樸素變體) | 如果 variant="plain"，則類別名稱會應用於根元素。 |
| .MuiButton-variantSoft | variantSoft (柔和變體) | 如果 variant="soft"，則類別名稱會應用於根元素。 |
| .MuiButton-variantSolid | variantSolid (實心變體) | 如果 variant="solid"，則類別名稱會應用於根元素。 |
您可以使用下列其中一種自訂選項覆寫元件的樣式
- 使用全域類別名稱。
- 在自訂 theme 中，使用規則名稱作為元件的
styleOverrides屬性一部分。
原始碼
如果您在此頁面中找不到資訊，請考慮查看元件的實作程式碼以取得更多詳細資訊。