Saltar al contenido

🎉 Material UI v5 is out now! Check out the announcement blog post

Badge

El componente Badge genera un pequeño badge en la esquina superior derecha de su(s) hijo(s).

Badges básicos

Ejemplos de insignias que contienen texto, utilizando colores primarios y secundarios. La insignia se aplica a sus hijos.

444
<Badge badgeContent={4} color="primary">
  <MailIcon />
</Badge>
<Badge badgeContent={4} color="secondary">
  <MailIcon />
</Badge>
<Badge badgeContent={4} color="error">
  <MailIcon />
</Badge>

Placas personalizadas

La siguiente tabla muestra un ejemplo de personalización del componente. Puedes aprender más sobre esto en la sección Personalizando Componentes de la documentación.

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

Visibilidad del Badge

La visibilidad del badge puede ser controlada usando la propiedad invisible.

1

El badge se oculta automáticamente con badgeContent igual a cero. Puede anular esto con la propiedad showZero.

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

Valor máximo

Puedes usar la propiedad max para limitar el valor máximo del contenido del badge.

9999+999+
<Badge badgeContent={99} {...defaultProps} />
<Badge badgeContent={100} {...defaultProps} />
<Badge badgeContent={1000} max={999} {...defaultProps} />

Badge de punto

La propiedad dot cambia el badge a un pequeño punto. Esto se puede usar como una notificación de que algo ha cambiado sin contar.

Typography

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

Superposición del Badge

Puede usar la propiedad overlap para colocar la insignia relativa a la esquina del elemento envuelto.

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

Alineación del Badge

Puede usar la propiedad overlap para colocar la insignia relativa a la esquina del elemento envuelto.

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