ColoredIndication

A customizable indication effect that displays colored overlays based on user interactions like hover, press, focus, and drag.
@Composable
fun rememberColoredIndication(
    color: Color,
    draggedAlpha: Float = 0.16f,
    focusedAlpha: Float = 0.1f,
    hoveredAlpha: Float = 0.08f,
    pressedAlpha: Float = 0.1f,
): IndicationNodeFactory
ParameterDescription
colorBase color to use for all interaction states
draggedAlphaAlpha value for the dragged state. Defaults to 0.16f
focusedAlphaAlpha value for the focused state. Defaults to 0.1f
hoveredAlphaAlpha value for the hovered state. Defaults to 0.08f
pressedAlphaAlpha value for the pressed state. Defaults to 0.1f
class ColoredIndication(
    hoveredColor: Color,
    pressedColor: Color,
    focusedColor: Color,
    draggedColor: Color,
) : IndicationNodeFactory
ParameterDescription
hoveredColorColor overlay to display when the component is hovered
pressedColorColor overlay to display when the component is pressed
focusedColorColor overlay to display when the component is focused
draggedColorColor overlay to display when the component is being dragged

Code Examples

Basic Usage

Use rememberColoredIndication to create a colored indication effect with a single base color:

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

import com.composeunstyled.Button
import com.composeunstyled.theme.rememberColoredIndication

Button(
    onClick = { },
    indication = rememberColoredIndication(color = Color.White),
) {
    Text("Hover or Click")
}