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

圖示按鈕API

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

範例

匯入

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

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



請參考文件中關於可用圖示選項的圖示章節。

屬性

ButtonBase 元件的屬性也適用。

名稱類型預設描述
childrennode-

要顯示的圖示。

類別object-

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

詳情請參閱下方的CSS 類別 API。

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

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

disabledboolfalse

若為 true，則元件會停用。

disableFocusRippleboolfalse

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

disableRippleboolfalse

若為 true，則漣漪效果會停用。
⚠️ 若沒有漣漪效果，預設不會針對 :focus-visible 設定樣式。請務必使用 .Mui-focusVisible 類別套用個別樣式來突顯元素。

edge'end'
| 'start'
| false		false

如果提供此屬性，則會使用負邊距來抵消一側的 padding（這通常有助於將圖示的左側或右側與上方或下方的內容對齊，而不會破壞邊框大小和形狀）。

loadingboolnull

若為 true，則會顯示載入指示器且按鈕會停用。若為 true \| false，則載入包裝器一律會在子項之前呈現，以防止Google 翻譯錯誤。

loadingIndicatornode<CircularProgress color="inherit" size={16} />

如果按鈕處於載入狀態，則此元素會放置在子項之前。節點應包含具有 role="progressbar" 和可存取名稱的元素。預設情況下，它會呈現由按鈕本身標記的 CircularProgress。

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

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

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

系統屬性，可讓您定義系統覆寫以及額外的 CSS 樣式。

詳情請參閱 `sx` 頁面。

ref 會轉發到根元素。

繼承

雖然上方未明確說明，但 ButtonBase 元件的屬性也適用於 IconButton。您可以利用此功能來鎖定巢狀元件。

主題預設屬性

您可以使用 MuiIconButton 來透過主題變更此元件的預設屬性。

CSS 類別

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

類別名稱規則名稱描述
.Mui-disabled如果 disabled={true}，則套用至根元素的狀態類別。
.MuiIconButton-colorErrorcolorError如果 color="error"，則套用至根元素的樣式。
.MuiIconButton-colorInfocolorInfo如果 color="info"，則套用至根元素的樣式。
.MuiIconButton-colorInheritcolorInherit如果 color="inherit"，則套用至根元素的樣式。
.MuiIconButton-colorPrimarycolorPrimary如果 color="primary"，則套用至根元素的樣式。
.MuiIconButton-colorSecondarycolorSecondary如果 color="secondary"，則套用至根元素的樣式。
.MuiIconButton-colorSuccesscolorSuccess如果 color="success"，則套用至根元素的樣式。
.MuiIconButton-colorWarningcolorWarning如果 color="warning"，則套用至根元素的樣式。
.MuiIconButton-edgeEndedgeEnd如果 edge="end"，則套用至根元素的樣式。
.MuiIconButton-edgeStartedgeStart如果 edge="start"，則套用至根元素的樣式。
.MuiIconButton-loadingloading如果 loading={true}，則套用至根元素的樣式。
.MuiIconButton-loadingIndicatorloadingIndicator套用至 loadingIndicator 元素的樣式。
.MuiIconButton-loadingWrapperloadingWrapper套用至 loadingWrapper 元素的樣式。
.MuiIconButton-rootroot套用至根元素的樣式。
.MuiIconButton-sizeLargesizeLarge如果 size="large"，則套用至根元素的樣式。
.MuiIconButton-sizeMediumsizeMedium如果 size="medium"，則套用至根元素的樣式。
.MuiIconButton-sizeSmallsizeSmall如果 size="small"，則套用至根元素的樣式。

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

原始碼

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