defaultMinimumComponentInteractiveSize

@Composable
fun Modifier.minimumInteractiveComponentSize(): Modifier

Code Examples

Basic Usage

Use the defaultComponentInteractiveSize theme property to specify the minimum interaction size for your components.

Use the Modifier.defaultComponentInteractiveSize() when creating your components to set the minimum size:

import com.composeunstyled.minimumInteractiveComponentSize
import com.composeunstyled.theme.buildTheme
import com.composeunstyled.theme.ComponentInteractiveSize

val Theme = buildTheme {
    defaultComponentInteractiveSize = ComponentInteractiveSize(
        size = 48.dp,
    )
}

@Composable
fun MinimumInteractiveSizeExample() {
    Theme {
        Button(onClick = { }, modifier = Modifier.minimumInteractiveComponentSize()) {
            Text("Click me")
        }
    }
}

Responsive Design

Use the touchInteractionSize parameter to set the minimum interactive size when running on touch devices (such as mobile). Use the nonTouchInteractionSize parameter to set the size when running on non-touch devices (such as desktop).

import com.composeunstyled.minimumInteractiveComponentSize
import com.composeunstyled.theme.buildTheme
import com.composeunstyled.theme.ComponentInteractiveSize

val Theme = buildTheme {
    defaultComponentInteractiveSize = ComponentInteractiveSize(
        touchInteractionSize = 48.dp,
        nonTouchInteractionSize = 32.dp
    )
}

@Composable
fun ResponsiveInteractiveSizeExample() {
    Theme {
        // this button will be at least 48x48 on mobile and 32x32 on desktop
        Button(onClick = { }, modifier = Modifier.minimumInteractiveComponentSize()) {
            Text("Click me")
        }
    }
}