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.
Placas personalizadas
Here is an example of customizing the component. You can learn more about this in the overrides documentation page.
El badge automáticamente se oculta con badgeContent igual a cero. Usted puede sobrescribir esto con la propiedad showZero.
<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.
<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 puede ser usado para mostrar una notificación sin mostrar el valor.
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 overlap para establecer el Badge relativo a la esquina del elemento envuelto.
<Badge color="secondary" badgeContent=" ">
{rectangle}
</Badge>
<Badge color="secondary" badgeContent=" " variant="dot">
{rectangle}
</Badge>
<Badge color="secondary" overlap="circle" badgeContent=" ">
{circle}
</Badge>
<Badge color="secondary" overlap="circle" badgeContent=" " variant="dot">
{circle}
</Badge>
Alineación del Badge
Usted puede usar la propiedad anchorOrigin para mover el Badge a cualquier esquina del elemento envuelto.
<Badge
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
>