Insignia
Insignia genera una pequeña insignia en la parte superior derecha de su(s) hijo(s).
Insignia básica
Ejemplos de insignias que contienen texto, utilizando colores primarios, secundarios, acento y neutrales. La insignia se aplica a sus hijos.
Color
Utilice la propiedad color para aplicar la paleta de temas al componente.
Personalización
Este es un ejemplo de personalización del componente. Puedes aprender más sobre esto en la página de documentación de overrides.
Visibilidad de las insignias
La visibilidad de las insignias puede controlarse mediante la propiedad invisible.
La insignia se oculta automáticamente cuando badgeContent es cero. Puede anular esta opción con la propiedad showZero.
Valor máximo
Puede utilizar la propiedad max para limitar el valor del contenido de la insignia.
Insignia de punto
La prop dot cambia una insignia en un pequeño punto. Puede usarse como notificación de que algo ha cambiado sin dar una cuenta.
Solapamiento de la insignia
Puede utilizar la propiedad overlap para colocar la insignia en relación con la esquina del elemento envuelto.
Alineación de la insignia
Puedes usar la propiedad anchorOrigin para mover la insignia a cualquier esquina del elemento envuelto.
<Badge
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
>Accesibilidad
No puede confiar en que el contenido de la insignia se anuncie correctamente.
Debe proporcionar una descripción completa, por ejemplo, con aria-label:
Sin Estilos
Si quiere controlar completamente el diseño del componente, sin estilos de interfaz de usuario que modificar, use la versión U-Base. Esta versión sin estilos del componente es la opción ideal para una gran personalización con un tamaño de paquete más pequeño.