Badge

Material 3

Badge contiene información dinámica como notificaciones o productos de un carrito. Su contenido debería ser un icono o un texto muy corto, como por ejemplo un número.

Implementación

Definición del componente

Material 3

@ExperimentalMaterial3Api
@Composable
fun Badge(
    modifier: Modifier = Modifier,
    containerColor: Color = BadgeDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    content: @Composable (RowScope.() -> Unit)? = null,
)

Atributo	Descripción
modifier	Modificador que implementará el composable.
containerColor	El color del fondo del componente.
contentColor	Color del contenido.
content	Contenido a mostrar dentro del Badge (Opcional).

Fuente

Puedes acceder a la documentación oficial de Google desde aquí.

Ejemplos

Material 3

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BadgeExample() {
    Badge(
        modifier = Modifier.padding(16.dp),
        containerColor = Color.Red,
        contentColor = Color.White,
        content = { Text("1") },
    )
}