Build apps faster with our new App builder! Check it out →

hoverable

Common

Modifier in Compose Foundation

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

Last updated:

Installation

dependencies {
   implementation("androidx.compose.foundation:foundation:1.8.0-alpha04")
}

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
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")
    }
}
by @alexstyl