Updated on 2026-08-14

core/ui/src/main/java/com/tangem/core/ui/components/Buttons.kt

@@ -7,11 +7,10 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.tooling.preview.Preview
 import com.tangem.core.ui.R
-import com.tangem.core.ui.components.buttons.common.TangemButton
-import com.tangem.core.ui.components.buttons.common.TangemButtonIconPosition
-import com.tangem.core.ui.components.buttons.common.TangemButtonSize
+import com.tangem.core.ui.components.buttons.common.*
 import com.tangem.core.ui.components.buttons.common.TangemButtonsDefaults
 import com.tangem.core.ui.res.TangemTheme
 
@@ -146,6 +145,8 @@ fun SecondaryButton(
     modifier: Modifier = Modifier,
     showProgress: Boolean = false,
     enabled: Boolean = true,
+    size: TangemButtonSize = TangemButtonSize.Default,
+    shape: Shape = size.toShape(),
 ) {
     TangemButton(
         modifier = modifier,
@@ -155,6 +156,8 @@ fun SecondaryButton(
         colors = TangemButtonsDefaults.secondaryButtonColors,
         enabled = enabled,
         showProgress = showProgress,
+        size = size,
+        shape = shape,
     )
 }
 

core/ui/src/main/java/com/tangem/core/ui/components/buttons/common/TangemButton.kt

@@ -6,6 +6,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.ReadOnlyComposable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.TextStyle
@@ -29,13 +30,14 @@ fun TangemButton(
     size: TangemButtonSize = TangemButtonSize.Default,
     elevation: ButtonElevation = TangemButtonsDefaults.elevation,
     textStyle: TextStyle = TangemTheme.typography.button,
+    shape: Shape = size.toShape(),
 ) {
     Button(
         modifier = modifier.heightIn(min = size.toHeightDp()),
         onClick = { if (!showProgress) onClick() },
         enabled = enabled,
         elevation = elevation,
-        shape = size.toShape(),
+        shape = shape,
         colors = colors,
         contentPadding = size.toContentPadding(icon = icon),
     ) {

core/ui/src/main/java/com/tangem/core/ui/components/buttons/segmentedbutton/SegmentedButton.kt

@@ -0,0 +1,161 @@
+package com.tangem.core.ui.components.buttons.segmentedbutton
+
+import androidx.compose.foundation.LocalIndication
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider
+import com.tangem.core.ui.res.TangemTheme
+import kotlinx.collections.immutable.PersistentList
+import kotlinx.collections.immutable.persistentListOf
+
+/**
+ * Segmented buttons
+ *
+ * [Figma component](https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?type=design&node-id=1961-2004&mode=design&t=OFPQ18YhLHVAANab-4)
+ *
+ * @param config list of buttons in SegmentedButtons
+ * @param onClick button click
+ * @param modifier component modifier
+ * @param color default button color
+ * @param selectedColor selected button color
+ * @param dividerColor border and divider color
+ * @param showIndication show ripple indication
+ * @param buttonContent content as separate button
+ */
+@Composable
+inline fun <reified T> SegmentedButtons(
+    config: PersistentList<T>,
+    crossinline onClick: (T) -> Unit,
+    modifier: Modifier = Modifier,
+    color: Color = TangemTheme.colors.background.tertiary,
+    selectedColor: Color = TangemTheme.colors.background.action,
+    dividerColor: Color = TangemTheme.colors.stroke.primary,
+    showIndication: Boolean = true,
+    crossinline buttonContent: @Composable (T) -> Unit,
+) {
+    if (config.isEmpty() || config.size == 1) return
+
+    var selected by remember { mutableIntStateOf(0) }
+
+    Row(
+        modifier = modifier
+            .clip(RoundedCornerShape(TangemTheme.dimens.radius26))
+            .background(dividerColor)
+            .padding(TangemTheme.dimens.spacing1),
+        horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing1),
+    ) {
+        repeat(config.size) { index ->
+            val leftRadius = if (index == 0) TangemTheme.dimens.radius26 else TangemTheme.dimens.radius0
+            val rightRadius = if (index == config.lastIndex) TangemTheme.dimens.radius26 else TangemTheme.dimens.radius0
+
+            Box(
+                modifier = Modifier
+                    .weight(1f)
+                    .background(
+                        color = if (index == selected) selectedColor else color,
+                        shape = RoundedCornerShape(
+                            topStart = leftRadius,
+                            topEnd = rightRadius,
+                            bottomEnd = rightRadius,
+                            bottomStart = leftRadius,
+                        ),
+                    )
+                    .clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = if (showIndication) LocalIndication.current else null,
+                    ) {
+                        onClick(config[index])
+                        selected = index
+                    },
+            ) {
+                buttonContent.invoke(config[index])
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun SegmentedButtonsPreview_Light(
+    @PreviewParameter(SegmentedButtonsPreviewProvider::class) config: PersistentList<SegmentedButtonsConfigPreview>,
+) {
+    TangemTheme {
+        SegmentedButtons(
+            config = config,
+            onClick = {},
+        ) {
+            Text(
+                text = it.text,
+                modifier = Modifier.padding(TangemTheme.dimens.spacing16),
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun SegmentedButtonsPreview_Dark(
+    @PreviewParameter(SegmentedButtonsPreviewProvider::class) config: PersistentList<SegmentedButtonsConfigPreview>,
+) {
+    TangemTheme(isDark = true) {
+        SegmentedButtons(
+            config = config,
+            onClick = {},
+        ) {
+            Text(
+                text = it.text,
+                modifier = Modifier.padding(TangemTheme.dimens.spacing16),
+            )
+        }
+    }
+}
+
+//region Preview config
+/**
+ * Segmented buttons preview model
+ *
+ * @param text button title
+ */
+internal data class SegmentedButtonsConfigPreview(
+    val text: String,
+)
+
+/**
+ * Segmented button preview provider
+ */
+internal class SegmentedButtonsPreviewProvider :
+    CollectionPreviewParameterProvider<PersistentList<SegmentedButtonsConfigPreview>>(
+        collection = listOf(
+            persistentListOf(
+                SegmentedButtonsConfigPreview(
+                    text = "Title 1",
+                ),
+                SegmentedButtonsConfigPreview(
+                    text = "Title 2",
+                ),
+                SegmentedButtonsConfigPreview(
+                    text = "Title 3",
+                ),
+            ),
+            persistentListOf(
+                SegmentedButtonsConfigPreview(
+                    text = "Title 1",
+                ),
+                SegmentedButtonsConfigPreview(
+                    text = "Title 2",
+                ),
+            ),
+        ),
+    )
+
+//endregion