Compose RoundedCornerShape, padding and background colour not working as expected [duplicate]

You want to use the padding after you have specified the background

@Preview
@Composable
fun MyCta() {
    MaterialTheme() {
        Box(
            modifier = Modifier
                .clip(RoundedCornerShape(50))
                .background(MaterialTheme.colors.primary)
                .padding(32.dp)
        ) {
            Text(
                "Tap to continue",
                Modifier
                    .padding(8.dp)
                    .background(Color.Red)
                ,
                color = MaterialTheme.colors.onPrimary
            )
        }
    }
}

Note: The explicit order helps you to reason about how different
modifiers will interact. Compare this to the view-based system where
you had to learn the box model, that margins applied "outside" the
element but padding "inside" it, and a background element would be
sized accordingly. The modifier design makes this kind of behavior
explicit and predictable, and gives you more control to achieve the
exact behavior you want.

Modifiers documentation:

Use

Box(
    modifier = Modifier
        .background(MaterialTheme.colors.primary,
            RoundedCornerShape(50))
        .padding(32.dp)
)

You have to apply the padding modifier after the background.
It is important the order of modifiers.