how do I change the background color of a button on mouse over?

# compose-desktop

[Daniele B]

how do I change the background color of a button on mouse over?

[Alexander Maryanovsky]

You can either use an Indication or just change the background on pointer enter/exit events:

@OptIn(ExperimentalComposeUiApi::class)
fun main() = singleWindowApplication {
    var background by remember { mutableStateOf(Color.Blue) }
    Button(
        onClick = { },
        colors = ButtonDefaults.buttonColors(
            backgroundColor = background
        ),
        modifier = Modifier
            .onPointerEvent(PointerEventType.Enter) {
                background = Color.Red
            }
            .onPointerEvent(PointerEventType.Exit) {
                background = Color.Blue
            }
    ) {
        Text("Button")
    }
}

[Daniele B]

@Alexander Maryanovsky thanks! that's exactly what I was looking for

[Louis Pullen-Freilich [G]]

If the button exposes an InteractionSource parameter you can just do interactionSource.collectIsHoveredAsState() and directly use that

[Alexander Maryanovsky]

Indeed, like this:

fun main() = singleWindowApplication {
    val interactionSource = remember { MutableInteractionSource() }
    val isHovered by interactionSource.collectIsHoveredAsState()
    val background = if (isHovered) Color.Red else Color.Blue
    Button(
        onClick = { },
        interactionSource = interactionSource,
        colors = ButtonDefaults.buttonColors(
            backgroundColor = background
        ),
    ) {
        Text("Button")
    }
}

[Louis Pullen-Freilich [G]]

And if you don't have one, you can use Modifier.hoverable instead of a custom pointer input to drive the event