GoogleSignInButton - Can be used in Compose Multliplatform

#GoogleSignInButton

#GoogleSignInButton - Can be used in Compose Kotlin Multliplatform that follows 
Google's design guidelines and can be easily customized to fit into your project.

GoogleButtonMode.kt

public sealed interface GoogleButtonMode {
    public data object Light : GoogleButtonMode
    public data object Dark : GoogleButtonMode
    public data object Neutral : GoogleButtonMode
}

GoogleSignInButton

@Composable
public fun GoogleSignInButtonIconOnly(
    modifier: Modifier = Modifier.size(44.dp),
    mode: GoogleButtonMode = GoogleButtonMode.Light,
    shape: Shape = ButtonDefaults.shape,
    onClick: () -> Unit,
) {
    val buttonColor = getButtonColor(mode)
    val borderStroke = getBorderStroke(mode)

    Button(
        modifier = modifier.size(if (isAndroidPlatform()) 40.dp else 44.dp),
        contentPadding = PaddingValues(0.dp),
        onClick = onClick,
        shape = shape,
        colors = buttonColor,
        border = borderStroke,
    ) {
        GoogleIcon()
    }
}


/**
 * As per guideline
 * call-to-action should be "Sign in with Google", "Sign up with Google", or "Continue with Google".
 */
@Composable
public fun GoogleSignInButton(
    modifier: Modifier = Modifier.height(44.dp),
    mode: GoogleButtonMode = GoogleButtonMode.Light,
    text: String = "Sign in with Google",
    shape: Shape = ButtonDefaults.shape,
    onClick: () -> Unit,
) {


    val buttonColor = getButtonColor(mode)
    val borderStroke = getBorderStroke(mode)

    val horizontalPadding = if (isAndroidPlatform()) 12.dp else 16.dp
    val iconTextPadding = if (isAndroidPlatform()) 10.dp else 12.dp
    Button(
        modifier = modifier,
        contentPadding = PaddingValues(horizontal = horizontalPadding),
        onClick = onClick,
        shape = shape,
        colors = buttonColor,
        border = borderStroke,
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            GoogleIcon()
            Spacer(modifier = Modifier.width(iconTextPadding))
            Text(
                text = text,
                maxLines = 1,
                fontFamily = Fonts.robotoFontFamily,
            )
        }

    }


}

@OptIn(ExperimentalResourceApi::class)
@Composable
private fun GoogleIcon() {
    Image(
        modifier = Modifier.size(20.dp),
        painter = painterResource("drawable/ic_google.xml"),
        contentDescription = "googleIcon"
    )
}


private fun getBorderStroke(mode: GoogleButtonMode): BorderStroke? {
    val borderStroke = when (mode) {
        GoogleButtonMode.Light -> BorderStroke(
            width = 1.dp,
            color = Color(0xFF747775),
        )

        GoogleButtonMode.Dark -> BorderStroke(
            width = 1.dp,
            color = Color(0xFF8E918F),
        )

        GoogleButtonMode.Neutral -> null
    }
    return borderStroke
}

@Composable
private fun getButtonColor(mode: GoogleButtonMode): ButtonColors {
    val containerColor = when (mode) {
        GoogleButtonMode.Light -> Color(0xFFFFFFFF)
        GoogleButtonMode.Dark -> Color(0xFF131314)
        GoogleButtonMode.Neutral -> Color(0xFFF2F2F2)
    }

    val contentColor = when (mode) {
        GoogleButtonMode.Dark -> Color(0xFFE3E3E3)
        else -> Color(0xFF1F1F1F)
    }

    return ButtonDefaults.buttonColors(containerColor = containerColor, contentColor = contentColor)
}

ic_google.xml

<vector android:height="20dp" android:viewportHeight="48"
    android:viewportWidth="48" android:width="20dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#EA4335" android:pathData="M24,9.5c3.54,0 6.71,1.22 9.21,3.6l6.85,-6.85C35.9,2.38 30.47,0 24,0 14.62,0 6.51,5.38 2.56,13.22l7.98,6.19C12.43,13.72 17.74,9.5 24,9.5z"/>
    <path android:fillColor="#4285F4" android:pathData="M46.98,24.55c0,-1.57 -0.15,-3.09 -0.38,-4.55H24v9.02h12.94c-0.58,2.96 -2.26,5.48 -4.78,7.18l7.73,6c4.51,-4.18 7.09,-10.36 7.09,-17.65z"/>
    <path android:fillColor="#FBBC05" android:pathData="M10.53,28.59c-0.48,-1.45 -0.76,-2.99 -0.76,-4.59s0.27,-3.14 0.76,-4.59l-7.98,-6.19C0.92,16.46 0,20.12 0,24c0,3.88 0.92,7.54 2.56,10.78l7.97,-6.19z"/>
    <path android:fillColor="#34A853" android:pathData="M24,48c6.48,0 11.93,-2.13 15.89,-5.81l-7.73,-6c-2.15,1.45 -4.92,2.3 -8.16,2.3 -6.26,0 -11.57,-4.22 -13.47,-9.91l-7.98,6.19C6.51,42.62 14.62,48 24,48z"/>
</vector>

Button different mode and shapes in android and ios

 

This guideline is used: https://developers.google.com/identity/branding-guidelines