Saltar al contenido
Ayuda a traducir esta página

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

He aquí 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

Usted puede usar la propiedad overlap para establecer el Badge relativo a la esquina del elemento envuelto.

1

El badge se oculta automáticamente con badgeContent igual a cero. Usted puede sobrescribir esto con la propiedad showZero.

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

Valor máximo

Usted puede usar la propiedad max para establecer el valor máximo que puede contener el 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

Usted puede usar la propiedad anchorOrigin para mover el Badge a cualquier 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',
  }}
>

Unstyled badge

5
<StyledBadge badgeContent={5} overlap="circular" sx={{ mr: 2 }}>
  <BadgeContent />
</StyledBadge>
<StyledBadge badgeContent={5} variant="dot" overlap="circular">
  <BadgeContent />
</StyledBadge>

API