Updated on 2026-08-14

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

@@ -230,7 +230,12 @@ private fun PrimaryButtonSample() {
         verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing8),
     ) {
         PrimaryButton(modifier = Modifier.fillMaxWidth(), text = "Manage tokens", onClick = { })
-        PrimaryButton(modifier = Modifier.fillMaxWidth(), showProgress = true, text = "Manage tokens", onClick = { })
+        PrimaryButton(
+            modifier = Modifier.fillMaxWidth(),
+            showProgress = true,
+            text = "Manage tokens",
+            onClick = { },
+        )
         PrimaryButtonIconEnd(
             modifier = Modifier.fillMaxWidth(),
             text = "Manage tokens",
@@ -289,7 +294,12 @@ private fun SecondaryButtonSample() {
         verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing8),
     ) {
         SecondaryButton(modifier = Modifier.fillMaxWidth(), text = "Manage tokens", onClick = { })
-        SecondaryButton(modifier = Modifier.fillMaxWidth(), showProgress = true, text = "Manage tokens", onClick = { })
+        SecondaryButton(
+            modifier = Modifier.fillMaxWidth(),
+            showProgress = true,
+            text = "Manage tokens",
+            onClick = { },
+        )
         SecondaryButtonIconEnd(
             modifier = Modifier.fillMaxWidth(),
             text = "Manage tokens",

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

@@ -0,0 +1,68 @@
+package com.tangem.core.ui.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+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
+
+/**
+ * [Show in Figma](https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?type=design&node-id=68%3A20&mode=design&t=WSV3AxC6zV1y0CHF-1)
+ * */
+@Composable
+fun Notifier(
+    text: String,
+    modifier: Modifier = Modifier,
+    textColor: Color = TangemTheme.colors.text.primary1,
+    backgroundColor: Color = TangemTheme.colors.icon.inactive,
+) {
+    Box(
+        modifier = modifier
+            .heightIn(TangemTheme.dimens.size32)
+            .background(
+                color = backgroundColor,
+                shape = TangemTheme.shapes.roundedCorners8,
+            ),
+    ) {
+        Text(
+            modifier = Modifier
+                .align(Alignment.Center)
+                .padding(horizontal = TangemTheme.dimens.size10),
+            text = text,
+            color = textColor,
+            style = TangemTheme.typography.button,
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun TangemNotifierPreview_Light(@PreviewParameter(NotifierProvider::class) text: String) {
+    TangemTheme(isDark = false) {
+        Notifier(text = text)
+    }
+}
+
+@Preview
+@Composable
+private fun TangemNotifierPreview_Dark(@PreviewParameter(NotifierProvider::class) text: String) {
+    TangemTheme(isDark = true) {
+        Notifier(text = text)
+    }
+}
+
+private class NotifierProvider : CollectionPreviewParameterProvider<String>(
+    collection = listOf(
+        "a",
+        "Card 1 of 2",
+        "Card 1 of 2 or many other",
+    ),
+)

core/ui/src/main/java/com/tangem/core/ui/res/TangemDimens.kt

@@ -43,6 +43,7 @@ data class TangemDimens internal constructor(
     val size5: Dp = 5.dp,
     val size7: Dp = 7.dp,
     val size8: Dp = 8.dp,
+    val size10: Dp = 10.dp,
     val size11: Dp = 11.dp,
     val size12: Dp = 12.dp,
     val size16: Dp = 16.dp,

core/ui/src/main/java/com/tangem/core/ui/res/TangemShapes.kt

@@ -8,6 +8,7 @@ import androidx.compose.ui.graphics.Shape
 data class TangemShapes internal constructor(
     val roundedCornersSmall: Shape,
     val roundedCornersSmall2: Shape,
+    val roundedCorners8: Shape,
     val roundedCornersMedium: Shape,
     val roundedCornersXMedium: Shape,
     val roundedCornersLarge: Shape,
@@ -16,6 +17,7 @@ data class TangemShapes internal constructor(
     constructor(dimens: TangemDimens) : this(
         roundedCornersSmall = RoundedCornerShape(size = dimens.radius2),
         roundedCornersSmall2 = RoundedCornerShape(size = dimens.radius4),
+        roundedCorners8 = RoundedCornerShape(size = dimens.radius8),
         roundedCornersMedium = RoundedCornerShape(size = dimens.radius12),
         roundedCornersXMedium = RoundedCornerShape(size = dimens.radius16),
         roundedCornersLarge = RoundedCornerShape(size = dimens.radius28),