Jetpack compose Toggle Button

This will be a quick post, just a small component if you need a toggle button.

The challenge is to create a button like this:

Toggle Button design

We can list a couple of features here:

• Multiple buttons can be aligned into the same component.
• Buttons can be single or multiple select, or just clickable.
• Rounded corners over the overall group.
• Dividers between buttons.

The code for this is:

For achieving the first design we can use it in this way:

class MyButton {
  private val options = arrayOf(
    ToggleButtonOption(
      "Projects",
      iconRes = R.drawable.ic_star,
    ),
    ToggleButtonOption(
      "Upcoming",
      iconRes = R.drawable.ic_upcoming,
    ),
  )

  @Composable
  fun Component(onClick: (selection: Selection) -> Unit) {
    ToggleButton(
      options = options,
      type = SelectionType.SINGLE,
      modifier = Modifier.padding(end = 4.dp),
      onClick = onClick
    )
  }
}

This is all, Thanks!