A modern programming language that makes developers happier.

kotlinlang

image.png

Hello friends. Do you know how to customize this “shadow” part?

set a box with that shadow color than with bottom padding you have your button on top of it you will need to include animation when clicked by changing the offset

Thanks <@U06BL9QUELF> I tried box but didn’t work, let me try again

```@Composable
fun PrimaryButton(
    modifier: Modifier = Modifier,
    text: String,
    onClick: () -> Unit,
    loading: Boolean = false,
    enabled: Boolean = true,
) {
    val buttonOffset = remember { Animatable(0f) }
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()

    LaunchedEffect(isPressed) {
        if (isPressed) {
            buttonOffset.animateTo(
                4f,
                animationSpec = tween(durationMillis = 50),
            )
        } else {
            buttonOffset.animateTo(
                0f,
                animationSpec = tween(durationMillis = 50),
            )
        }
    }

    Box(
        modifier = modifier
            .fillMaxWidth()
            .height(50.dp),
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .padding(top = 4.dp)
                .background(
                    if (enabled) MaterialTheme.colorScheme.onPrimaryContainer else Color(
                        0xFFFFA361,
                    ),
                    RoundedCornerShape(10.dp),
                ),
        )

        TextButton(
            shape = RoundedCornerShape(10.dp),
            onClick = { onClick() },
            colors = ButtonDefaults.buttonColors(
                containerColor = MaterialTheme.colorScheme.primary,
                contentColor = Color.White,
                disabledContainerColor = Color(0xFFF9D2B5),
                disabledContentColor = Color.White,
            ),
            enabled = enabled && !loading,
            interactionSource = interactionSource,
            modifier = Modifier
                .fillMaxSize()
                .padding(bottom = 4.dp)
                .offset(y = if (loading || !enabled) buttonOffset.value.dp else buttonOffset.value.dp),
        ) {
            Row(
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.fillMaxSize(),
            ) {
                if (loading) {
                    CircularProgressIndicator(
                        strokeWidth = 2.dp,
                        modifier = Modifier.size(25.dp),
                    )
                } else {
                    Text(
                        text = text,
                        style = MaterialTheme.typography.titleLarge,
                    )
                }
            }
        }
    }
}```
here this is an old impl you can use its not the best but it may help you