Compose rounded Button with transparent background

Issue

I am trying to display a Button with rounded corners and a 50% transparent background. My current attempt looks like this:

MaterialTheme {
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = Color.Yellow
    ) {
        Column(modifier = Modifier.padding(10.dp)) {
            Button(
                modifier = Modifier
                    .clip(CircleShape),
                onClick = { },
                colors = ButtonDefaults.buttonColors(backgroundColor = Color.White.copy(alpha = 0.5f))
            ) {
                Text(
                    text = "My Button",
                    textAlign = TextAlign.Center
                )
            }
        }
    }
}

The result is not very pretty:

It looks like the issue is with with the shading, but I'm not sure how to remove it and just show the same color within the whole shape.

Solution

Turns out the shadow will disappear when the elevation is removed.

Button(
    modifier = Modifier
        .clip(CircleShape),
    onClick = { },
    elevation = null,
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.White.copy(alpha = 0.5f))
) { ... }

Answered By - SimonSays