Interaction states

Hover, focus, press and drag states, and how to observe them.

• Interactive page: https://m3e.ljzapps.app/#foundations/interaction-states

Components overlay their content color as a state layer: hover 8 percent, focus 10 percent, press 10 percent, drag 16 percent. Observe states with a MutableInteractionSource.

val source = remember { MutableInteractionSource() }
val hovered by source.collectIsHoveredAsState()
val pressed by source.collectIsPressedAsState()
val focused by source.collectIsFocusedAsState()
Surface(onClick = { }, interactionSource = source) { /* content */ }

Expressive components also morph their shape while pressed. Pass shapes to the component, do not animate it yourself.