Composable Button Border Stroke looks weird

Question

I am trying to implement a button with a black containercolor and a white border, but the edge of the stroke add a black color too on it and i dont know why.

The code:

@Composable
fun Button(){
        OutlinedButton(
            onClick = { },
            modifier = Modifier.padding(16.dp),
            border = BorderStroke(2.dp, Color.White),
            shape = RoundedCornerShape(50),
            colors = ButtonDefaults.outlinedButtonColors(
                contentColor = Color.White,
                disabledContentColor = Color.Gray,
                containerColor = Color.Black,
                disabledContainerColor = Color.Transparent,
            )
        ) {
            Text(text = "Save")
        }
}

Answer 1

You should consider using a simple Button Composable instead, as the OutlinedButton is most likely adding that outline around your design inadvertently. Also, make sure you add a cilp modifier as to make sure the animations works properly.

Button(
    onClick = { },
    modifier = Modifier
        .padding(16.dp)
        .clip(RoundedCornerShape(50)),
    border = BorderStroke(2.dp, Color.White),
    shape = RoundedCornerShape(50),
    colors = ButtonDefaults.outlinedButtonColors(
        contentColor = Color.White,
        disabledContentColor = Color.Gray,
        containerColor = Color.Black,
        disabledContainerColor = Color.Transparent,
    )
) {
    Text(text = "Save")
}