徽章

徽章在其子元素（或多个子元素）的右上角生成一个小徽章。

基本徽章

包含文本的徽章示例，使用了 primary 和 secondary 颜色。徽章应用于其子元素。

<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 />