---
title: "hoverable"
description: "Configure component to be hoverable via pointer enter/exit events."
type: "modifier"
---

<div class='type'>Compose Modifier</div>

<a id='references'></a>
<div class='sourceset sourceset-common'>Common</div>


```kotlin
fun Modifier.hoverable(interactionSource: MutableInteractionSource, enabled: Boolean = true) =
    this then if (enabled) HoverableElement(interactionSource) else Modifier
```


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

#### Parameters

| | |
| --- | --- |
| interactionSource | `MutableInteractionSource` that will be used to emit `HoverInteraction.Enter` when this element is being hovered. |
| enabled | Controls the enabled state. When `false`, hover events will be ignored. |




## Code Examples
### HoverableSample
```kotlin
@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")
    }
}
```