New Compose Multiplatform components arrived on Composables UICheck it out →

Modifier in Compose Foundation

hoverable

Common

Configure component to be hoverable via pointer enter/exit events.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation:1.7.0-beta04")
}

Overloads

@Stable
fun Modifier.hoverable(
    interactionSource: MutableInteractionSource,
    enabled: Boolean = true
)

Parameters

namedescription
interactionSource[MutableInteractionSource] that will be used to emit [HoverInteraction.Enter] when this element is being hovered.
enabledControls the enabled state. When false, hover events will be ignored.

Code Example

HoverableSample

@Composable
@Sampled
fun HoverableSample() {
    // MutableInteractionSource to track changes of the component's interactions (like "hovered")
    val interactionSource = remember { MutableInteractionSource() }
    val isHovered by interactionSource.collectIsHoveredAsState()

    // the color will change depending on the presence of a hover
    Box(
        modifier = Modifier
            .size(128.dp)
            .background(if (isHovered) Color.Red else Color.Blue)
            .hoverable(interactionSource = interactionSource),
        contentAlignment = Alignment.Center
    ) {
        Text(if (isHovered) "Hovered" else "Unhovered")
    }
}