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

BadgeAPI

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

示範

匯入

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

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

屬性

原生元件的屬性也可用。

名稱類型預設值描述
anchorOrigin{ horizontal?: 'left'
| 'right', vertical?: 'bottom'
| 'top' }		{ vertical: 'top', horizontal: 'right', }

徽章的錨點。

badgeContentnode-

在徽章中呈現的內容。

childrennode-

徽章將相對於此節點新增。

classesobject-

覆寫或擴充套用至元件的樣式。

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

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

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

componentelementType-

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

components{ Badge?: elementType, Root?: elementType }{}

用於內部每個插槽的元件。

componentsProps{ badge?: func
| object, root?: func
| object }		{}

插槽元件的額外屬性。您可以覆寫現有的屬性或新增屬性。

invisibleboolfalse

如果為 true，則徽章不可見。

maxnumber99

要顯示的最大計數。

overlap'circular'
| 'rectangular'		'rectangular'

徽章應重疊的包裝形狀。

showZeroboolfalse

控制當 badgeContent 為零時是否隱藏徽章。

slotProps{ badge?: func
| object, root?: func
| object }		{}

用於 Badge 內部每個插槽的屬性。

slots{ badge?: elementType, root?: elementType }{}

用於 Badge 內部每個插槽的元件。可以是使用 HTML 元素的字串或元件。

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

系統屬性，允許定義系統覆寫以及其他 CSS 樣式。

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

variant'dot'
| 'standard'
| string		'standard'

要使用的變體。

ref 轉發到根元素。

主題預設屬性

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

CSS 類別

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

類別名稱規則名稱描述
.MuiBadge-anchorOriginBottomLeftanchorOriginBottomLeft如果 anchorOrigin={{ 'bottom', 'left' }}，則套用至徽章 span 元素的樣式。
.MuiBadge-anchorOriginBottomLeftCircularanchorOriginBottomLeftCircular如果 anchorOrigin={{ 'bottom', 'left' }} overlap="circular"，則套用至徽章 span 元素的樣式。
.MuiBadge-anchorOriginBottomLeftRectangularanchorOriginBottomLeftRectangular如果 anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"，則套用至徽章 span 元素的樣式。
.MuiBadge-anchorOriginBottomRightanchorOriginBottomRight如果 anchorOrigin={{ 'bottom', 'right' }}，則套用至徽章 span 元素的樣式。
.MuiBadge-anchorOriginBottomRightCircularanchorOriginBottomRightCircular如果 anchorOrigin={{ 'bottom', 'right' }} overlap="circular"，則套用至徽章 span 元素的樣式。
.MuiBadge-anchorOriginBottomRightRectangularanchorOriginBottomRightRectangular如果 anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"，則套用至徽章 span 元素的樣式。
.MuiBadge-anchorOriginTopLeftanchorOriginTopLeft如果 anchorOrigin={{ 'top', 'left' }}，則套用至徽章 span 元素的樣式。
.MuiBadge-anchorOriginTopLeftCircularanchorOriginTopLeftCircular如果 anchorOrigin={{ 'top', 'left' }} overlap="circular"，則套用至徽章 span 元素的樣式。
.MuiBadge-anchorOriginTopLeftRectangularanchorOriginTopLeftRectangular如果 anchorOrigin={{ 'top', 'left' }} overlap="rectangular"，則套用至徽章 span 元素的樣式。
.MuiBadge-anchorOriginTopRightanchorOriginTopRight如果 anchorOrigin={{ 'top', 'right' }}，則套用至徽章 span 元素的樣式。
.MuiBadge-anchorOriginTopRightCircularanchorOriginTopRightCircular如果 anchorOrigin={{ 'top', 'right' }} overlap="circular"，則套用至徽章 span 元素的樣式。
.MuiBadge-anchorOriginTopRightRectangularanchorOriginTopRightRectangular如果 anchorOrigin={{ 'top', 'right' }} overlap="rectangular"，則套用至徽章 span 元素的樣式。
.MuiBadge-badgebadge套用至徽章 span 元素的樣式。
.MuiBadge-colorErrorcolorError如果 color="error"，則套用至徽章 span 元素的樣式。
.MuiBadge-colorInfocolorInfo如果 color="info"，則套用至徽章 span 元素的樣式。
.MuiBadge-colorPrimarycolorPrimary如果 color="primary"，則套用至徽章 span 元素的樣式。
.MuiBadge-colorSecondarycolorSecondary如果 color="secondary"，則套用至徽章 span 元素的樣式。
.MuiBadge-colorSuccesscolorSuccess如果 color="success"，則套用至徽章 span 元素的樣式。
.MuiBadge-colorWarningcolorWarning如果 color="warning"，則套用至徽章 span 元素的樣式。
.MuiBadge-dotdot如果 variant="dot"，則套用至徽章 span 元素的樣式。
.MuiBadge-invisibleinvisible如果 invisible={true}，則套用至徽章 span 元素的狀態類別。
.MuiBadge-overlapCircularoverlapCircular如果 overlap="circular"，則套用至徽章 span 元素的樣式。
.MuiBadge-overlapRectangularoverlapRectangular如果 overlap="rectangular"，則套用至徽章 span 元素的樣式。
.MuiBadge-rootroot套用至根元素的樣式。
.MuiBadge-standardstandard如果 variant="standard"，則套用至徽章 span 元素的樣式。

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

原始碼

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