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

<div id="references">

```kotlin
@Composable
fun rememberColoredIndication(
    color: Color,
    draggedAlpha: Float = 0.16f,
    focusedAlpha: Float = 0.1f,
    hoveredAlpha: Float = 0.08f,
    pressedAlpha: Float = 0.1f,
): IndicationNodeFactory
```

| Parameter | Description |
|-----------|-------------|
| `color` | Base color to use for all interaction states |
| `draggedAlpha` | Alpha value for the dragged state. Defaults to `0.16f` |
| `focusedAlpha` | Alpha value for the focused state. Defaults to `0.1f` |
| `hoveredAlpha` | Alpha value for the hovered state. Defaults to `0.08f` |
| `pressedAlpha` | Alpha value for the pressed state. Defaults to `0.1f` |

```kotlin
class ColoredIndication(
    hoveredColor: Color,
    pressedColor: Color,
    focusedColor: Color,
    draggedColor: Color,
) : IndicationNodeFactory
```

| Parameter | Description |
|-----------|-------------|
| `hoveredColor` | Color overlay to display when the component is hovered |
| `pressedColor` | Color overlay to display when the component is pressed |
| `focusedColor` | Color overlay to display when the component is focused |
| `draggedColor` | Color overlay to display when the component is being dragged |

</div>

## Code Examples

### Basic Usage

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

```compose id="colored-indication-basic" height=100
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.composeunstyled.Button
import com.composeunstyled.Text
import com.composeunstyled.theme.rememberColoredIndication

COMPOSE {
    val interactionSource = remember { MutableInteractionSource() }

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

```kotlin
import com.composeunstyled.Button
import com.composeunstyled.theme.rememberColoredIndication
```

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