I am trying to add two text portions inside a button. The first text aligns to the left, while the second one should align to the right. Here’s what I tried:

OutlinedButton(
            colors = ButtonDefaults.outlinedButtonColors(Color.Transparent),
            border = BorderStroke(0.dp, Color.Transparent),
            modifier = Modifier.fillMaxWidth()
                               .background(
                color = Color.Transparent,
        shape = RectangleShape, // Oval shape

        //border = androidx.compose.ui.drawBorder(2.dp, Color.Red) // Border color and width
        ),
            onClick = {}
        ) {
            Row(modifier = Modifier.fillMaxWidth()) {
                Text(
                    modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
                    color = Color.Black,
                    text = text,
                    textAlign = TextAlign.Start,
                    fontSize = 15.sp,
                )
                Text(
                    modifier = Modifier.padding(horizontal = 0.dp, vertical = 0.dp),
                    color = Color.Black,
                    text = ">",
                    textAlign = TextAlign.End,
                    fontSize = 15.sp,
                )
            }
        }

However, this doesn’t give me the expected behavior. It aligns both texts to the left:

How to solve this?

>Solution :

Add Horizontal Arrangement SpaceBetween, it will work

 OutlinedButton(
        onClick = { }, modifier = Modifier
            .fillMaxWidth()
            .height(48.dp)
    ) {

        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
            Text(text = "Button Text1", textAlign = TextAlign.Start)
            Text(text = "Button Text2", textAlign = TextAlign.End)

        }


    }