Hi all. I have been looking for an example of how to change the background of an

IconButton/Icon

when the mouse hovers over it. Much like what happens in Winddows, when you move the mouse over the window close button. I stumble on the

MutableInteractSource

but haven't found anything that allows me to et the background. Does anyone have any example I could leverage. Thanks

Check

LocalIndication

. I think the default indication (indication when you do not apply a material theme) is close to what you want.

@Albert Chang Thanks, that looks like what I need. I'll see where that goes.

Indication is more for generic re-usable effects, such as a ripple / overlay - it’s not really suited for changing parameters to a component, like background color. Instead for this case you can just do something like:

val interactionSource = remember { MutableInteractionSource() }

val isHovered by interactionSource.collectIsHoveredAsState()
    IconButton(
... interactionSource) {
    }

And then use

isHovered

to draw a

Modifier.background

or similar, depending on your specific use case

Thankyou!

@Louis Pullen-Freilich [G] outstanding thank you

You should be able to remove the

hoverable

, since

clickable

internally also supports hover events by default

ok, thanks for that. It's really a

voyage of discovery

to find these nuances.

Yes, this is a known area of lacking documentation

as a nit, and I don't know if you have any input to this and really not worth a ticket, but it would have been nice if the clickable overload with the

interactionSource

parameter had a null default for the

indication

parameter

@Louis Pullen-Freilich [G] clickable supports hover??

Yep, the layering is like: • focusable supports focus events • hoverable supports hover events • draggable supports drag events And then

clickable

is a higher level thing, that supports press events and combines focusable / hoverable internally - so it’s just a combined modifier that handles press / focus / hover, for higher level components to build on top of