徽章

徽章會在其子元素(們)的右上角產生一個小徽章。

基本徽章

包含文字的徽章範例，使用主要和次要顏色。徽章會套用至其子元素。

<Badge badgeContent={4} color="primary">
  <MailIcon color="action" />
</Badge>

<Badge badgeContent={4} color="primary">
  <MailIcon color="action" />
</Badge>

按下 Enter 鍵開始編輯

顏色

使用 color 屬性將主題調色盤套用至元件。

<Badge badgeContent={4} color="secondary">
  <MailIcon color="action" />
</Badge>
<Badge badgeContent={4} color="success">
  <MailIcon color="action" />
</Badge>

<Badge badgeContent={4} color="secondary">
  <MailIcon color="action" />
</Badge>
<Badge badgeContent={4} color="success">
  <MailIcon color="action" />
</Badge>

按下 Enter 鍵開始編輯

客製化

以下是如何客製化元件的範例。您可以在覆寫文件頁面中了解更多資訊。

<IconButton aria-label="cart">
  <StyledBadge badgeContent={4} color="secondary">
    <ShoppingCartIcon />
  </StyledBadge>
</IconButton>

<IconButton aria-label="cart">
  <StyledBadge badgeContent={4} color="secondary">
    <ShoppingCartIcon />
  </StyledBadge>
</IconButton>

按下 Enter 鍵開始編輯

徽章可見性

徽章的可見性可以使用 invisible 屬性來控制。

顯示徽章

當 badgeContent 為零時，徽章會自動隱藏。您可以使用 showZero 屬性來覆寫此行為。

<Badge color="secondary" badgeContent={0}>
  <MailIcon />
</Badge>
<Badge color="secondary" badgeContent={0} showZero>
  <MailIcon />
</Badge>

<Badge color="secondary" badgeContent={0}>
  <MailIcon />
</Badge>
<Badge color="secondary" badgeContent={0} showZero>
  <MailIcon />
</Badge>

按下 Enter 鍵開始編輯

最大值

您可以使用 max 屬性來限制徽章內容的值。

9999+999+

<Badge color="secondary" badgeContent={99}>
  <MailIcon />
</Badge>
<Badge color="secondary" badgeContent={100}>
  <MailIcon />
</Badge>
<Badge color="secondary" badgeContent={1000} max={999}>
  <MailIcon />
</Badge>

<Badge color="secondary" badgeContent={99}>
  <MailIcon />
</Badge>
<Badge color="secondary" badgeContent={100}>
  <MailIcon />
</Badge>
<Badge color="secondary" badgeContent={1000} max={999}>
  <MailIcon />
</Badge>

按下 Enter 鍵開始編輯

點狀徽章

dot 屬性會將徽章變更為小點。這可以用作通知，表示某些內容已變更，而無需提供計數。

<Badge color="secondary" variant="dot">
  <MailIcon />
</Badge>

<Badge color="secondary" variant="dot">
  <MailIcon />
</Badge>

按下 Enter 鍵開始編輯

徽章重疊

您可以使用 overlap 屬性將徽章放置在相對於包裝元素角落的位置。

<Badge color="secondary" badgeContent=" ">
  {rectangle}
</Badge>
<Badge color="secondary" badgeContent=" " variant="dot">
  {rectangle}
</Badge>
<Badge color="secondary" overlap="circular" badgeContent=" ">
  {circle}
</Badge>
<Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
  {circle}
</Badge>

<Badge color="secondary" badgeContent=" ">
  {rectangle}
</Badge>
<Badge color="secondary" badgeContent=" " variant="dot">
  {rectangle}
</Badge>
<Badge color="secondary" overlap="circular" badgeContent=" ">
  {circle}
</Badge>
<Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
  {circle}
</Badge>

按下 Enter 鍵開始編輯

徽章對齊

您可以使用 anchorOrigin 屬性將徽章移動到包裝元素的任何角落。

垂直

頂部底部

水平

右側左側

11299+999+

<Badge
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
>

無障礙功能

您不能依賴徽章的內容被正確地宣告。您應該提供完整的描述，例如使用 aria-label

<IconButton aria-label={notificationsLabel(100)}>
  <Badge badgeContent={100} color="secondary">
    <MailIcon />
  </Badge>
</IconButton>

<IconButton aria-label={notificationsLabel(100)}>
  <Badge badgeContent={100} color="secondary">
    <MailIcon />
  </Badge>
</IconButton>

按下 Enter 鍵開始編輯

無樣式

使用 Base UI Badge 完全掌控元件的設計，無需覆寫 Material UI 或 Joy UI 樣式。此無樣式版本的元件是高度客製化且套件大小較小的理想選擇。

API

請參閱以下文件，以取得此處提及之元件的所有屬性和類別的完整參考。

<Badge />