---
title: "LocalRippleConfiguration"
description: "CompositionLocal used for providing [RippleConfiguration] down the tree."
type: "property"
---
## API Reference

> Source set: Common

```kotlin
public val LocalRippleConfiguration: ProvidableCompositionLocal<RippleConfiguration?> =
    compositionLocalWithComputedDefaultOf {
        RippleConfiguration()
    }
```

CompositionLocal used for providing [RippleConfiguration](/jetpack-compose/androidx.compose.material3/material3/classes/RippleConfiguration/api) down the tree. This acts as a
tree-local 'override' for ripples used inside components that you cannot directly control, such
as to change the color of a specific component's ripple, or disable it entirely by providing
`null`.

In most cases you should rely on the default theme behavior for consistency with other
components. This exists as an escape hatch for individual components and is not intended to be
used for full theme customization across an application. For this use case you should instead
build your own custom ripple that queries your design system theme values directly using
`createRippleModifierNode`.

The ripple configuration is resolved as follows:
- [LocalRippleThemeConfiguration](/jetpack-compose/androidx.compose.material3/material3/properties/LocalRippleThemeConfiguration/api) provides the highest-level theming configuration for ripples,
including whether the focus indication is drawn by inset focus rings.
- [LocalRippleConfiguration](/jetpack-compose/androidx.compose.material3/material3/properties/LocalRippleConfiguration/api) provides hierarchical per-ripple configuration for [ripple](/jetpack-compose/androidx.compose.material3/material3/functions/ripple/api),
including disabling ripples and their indications. This takes next highest priority.
- [ripple](/jetpack-compose/androidx.compose.material3/material3/functions/ripple/api) parameters allow specifying configuration for individual indication callsites in
components.

## Code Examples

### RippleConfigurationOpacitySample

```kotlin
@Preview
@Sampled
@Composable
fun RippleConfigurationOpacitySample() {
    Column {
        // Custom ripple color provided to a subtree via LocalRippleConfiguration
        val customRippleConfiguration = RippleConfiguration(color = Color.Magenta)
        CompositionLocalProvider(LocalRippleConfiguration provides customRippleConfiguration) {
            Button(onClick = {}) { Text("Magenta Ripple Button") }
        }

        Spacer(Modifier.height(16.dp))

        // Disabling ripples entirely for a subtree by providing null
        CompositionLocalProvider(LocalRippleConfiguration provides null) {
            Button(onClick = {}) { Text("No Ripple Button") }
        }
    }
}
```

### RippleConfigurationInsetFocusRingSample

```kotlin
@Preview
@Sampled
@Composable
fun RippleConfigurationInsetFocusRingSample() {
    // Enable inset focus rings at theme level
    CompositionLocalProvider(
        LocalRippleThemeConfiguration provides RippleDefaults.InsetFocusRingThemeConfiguration
    ) {
        // Custom focus ring colors provided to a subtree via LocalRippleConfiguration
        val customFocusRingConfiguration =
            RippleConfiguration(
                focus =
                    RippleConfiguration.Focus.InsetRing(
                        outerStrokeColor = MaterialTheme.colorScheme.primary,
                        innerStrokeColor = MaterialTheme.colorScheme.onPrimary,
                    )
            )
        CompositionLocalProvider(LocalRippleConfiguration provides customFocusRingConfiguration) {
            val interactionSource = remember { MutableInteractionSource() }
            // Custom clickable element using inset focus ring with custom focusRingShape
            Box(
                modifier =
                    Modifier.size(120.dp)
                        .background(
                            MaterialTheme.colorScheme.surfaceVariant,
                            RoundedCornerShape(12.dp),
                        )
                        .clickable(
                            interactionSource = interactionSource,
                            indication = ripple(focusRingShape = RoundedCornerShape(12.dp)),
                            onClick = {},
                        ),
                contentAlignment = Alignment.Center,
            ) {
                Text("Custom Focus Ring")
            }
        }
    }
}
```