Pular para o conteúdo
Ajude a traduzir esta página

Emblema

O componente Badge gera um pequeno emblema no canto superior direito de seu(s) filho(s).

Emblemas básicos

Exemplos de emblemas contendo texto, usando cores primárias e secundárias. O emblema é aplicado aos seus filhos.

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

Emblemas customizados

Você pode usar a propriedade overlap para colocar o emblema em relação ao canto do elemento envolvido.

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

Visibilidade do emblema

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.

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

Visibilidade do emblema

A visibilidade dos emblemas pode ser controlada usando a propriedade invisible.

1

O emblema se esconde automaticamente quando o badgeContent é zero. Você pode sobrescrever isso com a propriedade showZero.

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

Valor máximo

Você pode usar a propriedade max para limitar o valor do conteúdo do emblema.

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>

Emblema como ponto

A propriedade dot altera um emblema para um pequeno ponto. Isto pode ser usado como uma notificação de que algo mudou sem fornecer uma contagem.

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

Alinhamento do emblema

Você pode usar a propriedade overlap para colocar o emblema em relação ao canto do elemento envolvido.

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

Alinhamento do emblema

Você pode usar a propriedade anchorOrigin para mover o emblema para qualquer canto do elemento envolvido.

Vertical
Horizontal
11299+999+
<Badge
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
>

Unstyled

Você não pode confiar que o conteúdo do badge seja anunciado corretamente. Você deve fornecer uma descrição completa, por exemplo, com aria-label:

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

Unstyled

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

API