Badge 徽章

徽章组件会在其子项（们）的右上角生成一个小徽章。

简单的徽章

这个示例是个包含了文本的徽章，同时使用了主色和副色。徽章会对其子元素生效。

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

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

Press Enter to start editing

自定义徽章

Use color prop to apply theme palette to component.

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

Press Enter to start editing

徽章组件的可见性

以下是自定义组件的一个示例。 You can learn more about this in the overrides documentation page.

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

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

Press Enter to start editing

徽章组件的可见性

徽章组件的隐显可以通过 invisible 属性来设置。

Show Badge

The badge hides automatically when badgeContent is zero. 您可以使用 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>

Press Enter to start editing

最大值

您可以使用 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>

Press Enter to start editing

圆点徽章

dot 属性会使得徽章渲染为一个小点。这样的话，可以在不给出具体计数的情况下，组件能够提示一下变化。

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

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

Press Enter to start editing

徽章组件的 overlap 属性

你可以使用 anchorOrigin 属性移把徽章组件移动到封装的元素的任何角落。

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

Press Enter to start editing

徽章组件的校准

你可以使用 anchorOrigin 属性移把徽章组件移动到封装的元素的任何角落。

Vertical

TopBottom

Horizontal

RightLeft

11299+999+

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

Accessibility

You can't rely on the content of the badge to be announced correctly. You should provide a full description, for instance, with 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>

Press Enter to start editing

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.

API

<Badge />