ColoredIndication

A customizable indication effect that displays colored overlays based on user interactions like hover, press, focus, and drag.

View Markdown

API Reference

rememberColoredIndication

Parameter	Type	Description
`hoveredColor`	`Color`	Color overlay to display when the component is hovered
`pressedColor`	`Color`	Color overlay to display when the component is pressed
`focusedColor`	`Color`	Color overlay to display when the component is focused
`draggedColor`	`Color`	Color overlay to display when the component is being dragged
`showAnimationSpec`	`AnimationSpec<Float>`
`hideAnimationSpec`	`AnimationSpec<Float>`
`color`	`Color`
`draggedAlpha`	`Float`
`focusedAlpha`	`Float`
`hoveredAlpha`	`Float`
`pressedAlpha`	`Float`

ColoredIndication

Parameter	Type	Description
`hoveredColor`	`Color`
`pressedColor`	`Color`
`focusedColor`	`Color`
`draggedColor`	`Color`
`animationSpecEnter`	`AnimationSpec<Float>`
`animationSpecExit`	`AnimationSpec<Float>`

Installation

implementation("com.composables:composeunstyled-colored-indication:2.10.0")

Code Examples

Basic Usage

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

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import com.composeunstyled.UnstyledButton
import androidx.compose.foundation.text.BasicText
import com.composeunstyled.theme.rememberColoredIndication

@Composable
fun ColoredIndicationBasicExample() {
    val interactionSource = remember { MutableInteractionSource() }

    UnstyledButton(
        onClick = { },
        backgroundColor = Color(0xFF3B82F6),
        shape = RoundedCornerShape(8.dp),
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 12.dp),
        indication = rememberColoredIndication(color = Color.White),
        interactionSource = interactionSource
    ) {
        BasicText("Hover or Click", style = TextStyle(color = Color.White))
    }
}

import com.composeunstyled.UnstyledButton
import com.composeunstyled.theme.rememberColoredIndication

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