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.
<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>El badge se oculta automáticamente con badgeContent igual a cero. Puede anular esto con la propiedad showZero.
<Badge color="secondary" badgeContent={0}>
<MailIcon />
</Badge>
<Badge color="secondary" badgeContent={0} showZero>
<MailIcon />
</Badge><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.
<Badge
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>