A modern programming language that makes developers happier.

kotlinlang

Screenshot_20221026-123312.png

Hello all.  I am trying to create a badge that is circular on the left and right side.  Ending up with this,

Code:

```Badge(
   backgroundColor = MaterialTheme.colors.primary
) {
   Text(
      text = "1",
      style = MaterialTheme.typography.body1,
      modifier = Modifier.padding(2.dp)
   )
}```

I would like the badge to be circular, not a square with rounded corners.  at least on the right and left side.  As I realize the top and bottom will not be a circular as the text expands

You can use `CircleShape` from <https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/shape/RoundedCornerShape.kt;l=115|https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]androidx/compose/foundation/shape/RoundedCornerShape.kt;l=115>

To clip the Badge?  Or instead of a Badge?

You can copy-paste the implementation of the `Badge` from <https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material/material/src/commonMain/kotlin/androidx/compose/material/Badge.kt;l=130|https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]rc/commonMain/kotlin/androidx/compose/material/Badge.kt;l=130> and replace line 137 with that `CircleShape`

Also, you get the shape you’re looking for if you use the material 3 badge composable - <https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/Badge.kt;l=148|https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]c/commonMain/kotlin/androidx/compose/material3/Badge.kt;l=148>