Add Composable for a Beta label

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/BetaLabel.kt

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.libraries.designsystem.atomic.atoms
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.annotations.CoreColorToken
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.compound.tokens.generated.internal.DarkColorTokens
+import io.element.android.compound.tokens.generated.internal.LightColorTokens
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.components.Text
+
+@OptIn(CoreColorToken::class)
+@Composable
+fun BetaLabel(
+    modifier: Modifier = Modifier,
+) {
+    val (backgroundColor, borderColor, textColor) = if (ElementTheme.isLightTheme) {
+        listOf(
+            LightColorTokens.colorGreen300,
+            LightColorTokens.colorGreen700,
+            LightColorTokens.colorGreen900,
+        )
+    } else {
+        listOf(
+            DarkColorTokens.colorGreen300,
+            DarkColorTokens.colorGreen700,
+            DarkColorTokens.colorGreen900,
+        )
+    }
+    val shape = RoundedCornerShape(size = 6.dp)
+    Text(
+        modifier = modifier
+            .border(
+                width = 1.dp,
+                color = borderColor,
+                shape = shape,
+            )
+            .background(
+                color = backgroundColor,
+                shape = shape,
+            )
+            .padding(horizontal = 8.dp, vertical = 4.dp),
+        text = "BETA",
+        style = ElementTheme.typography.fontBodySmMedium,
+        color = textColor,
+    )
+}
+
+@PreviewsDayNight
+@Composable
+internal fun BetaLabelPreview() = ElementPreview {
+    BetaLabel()
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/IconTitleSubtitleMolecule.kt

@@ -7,7 +7,9 @@
 
 package io.element.android.libraries.designsystem.atomic.molecules
 
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -20,6 +22,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
+import io.element.android.libraries.designsystem.atomic.atoms.BetaLabel
 import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -32,6 +35,7 @@ import io.element.android.libraries.designsystem.theme.components.Text
  * @param subTitle the subtitle to display
  * @param iconStyle the style of the [BigIcon] to display
  * @param modifier the modifier to apply to this layout
+ * @param showBetaLabel whether to show a "BETA" label next to the title
  */
 @Composable
 fun IconTitleSubtitleMolecule(
@@ -39,6 +43,7 @@ fun IconTitleSubtitleMolecule(
     subTitle: String?,
     iconStyle: BigIcon.Style,
     modifier: Modifier = Modifier,
+    showBetaLabel: Boolean = false,
 ) {
     Column(modifier) {
         BigIcon(
@@ -46,17 +51,25 @@ fun IconTitleSubtitleMolecule(
             style = iconStyle,
         )
         Spacer(modifier = Modifier.height(16.dp))
-        Text(
-            text = title,
-            modifier = Modifier
-                .fillMaxWidth()
-                .semantics {
-                    heading()
-                },
-            textAlign = TextAlign.Center,
-            style = ElementTheme.typography.fontHeadingMdBold,
-            color = ElementTheme.colors.textPrimary,
-        )
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(4.dp, Alignment.CenterHorizontally)
+        ) {
+            Text(
+                text = title,
+                modifier = Modifier
+                    .semantics {
+                        heading()
+                    },
+                textAlign = TextAlign.Center,
+                style = ElementTheme.typography.fontHeadingMdBold,
+                color = ElementTheme.colors.textPrimary,
+            )
+            if (showBetaLabel) {
+                BetaLabel()
+            }
+        }
         if (subTitle != null) {
             Spacer(Modifier.height(8.dp))
             Text(