Search code examples
androidandroid-jetpack-composeandroid-jetpack-compose-material3

Change background color of Badge compose


The default color of the Badge is red , how to change this color in jetpack compose? I am using Badge inside BagedBox and I have already tried Modifier.Background... but it is not working.


Solution

  • Starting with compose 1.1.x with M2 you can use the backgroundColor attribute in the Badge composable

    BadgedBox(
        badge = {
            Badge(backgroundColor=Green) { Text("8") } 
        }
    ){
       //...
    }
    

    enter image description here

    With M3 you can use the containerColor attribute

    androidx.compose.material3.BadgedBox(
        badge = {
            androidx.compose.material3.Badge(
                containerColor=LightGray
            )
        }
    )