MultinaireSocialLoginButton

OAuth/social login buttons with customizable styling.

Basic Usage

import { MultinaireSocialLoginButton } from '@multinaire/multinaire-design';

<MultinaireSocialLoginButton
  title="Continue with Google"
  icon="Google"
  onPress={() => signInWithGoogle()}
/>

Props

Prop	Type	Default	Description
title	string	-	Button label text
icon	MultinaireIcons	-	Social provider icon
iconColor	ColorKeys	-	Icon color override
titleColor	string	-	Text color override
backgroundColor	string	-	Background color override
flex	number	-	Flex value
width	DimensionValue	-	Button width
height	DimensionValue	-	Button height
margin	SpacingProps	-	Margin spacing
isLoading	boolean	false	Show loading state
onPress	() => void	-	Press handler

Examples

Google Sign-In

<MultinaireSocialLoginButton
  title="Continue with Google"
  icon="Google"
  backgroundColor="#ffffff"
  titleColor="#000000"
  onPress={() => signInWithGoogle()}
/>

Apple Sign-In

<MultinaireSocialLoginButton
  title="Continue with Apple"
  icon="Apple"
  backgroundColor="#000000"
  titleColor="#ffffff"
  onPress={() => signInWithApple()}
/>

Facebook Sign-In

<MultinaireSocialLoginButton
  title="Continue with Facebook"
  icon="Facebook"
  backgroundColor="#1877F2"
  titleColor="#ffffff"
  onPress={() => signInWithFacebook()}
/>

Full Width Login Options

<MultinaireContainer gap={12}>
  <MultinaireSocialLoginButton
    width="100%"
    title="Continue with Google"
    icon="Google"
    onPress={() => signInWithGoogle()}
  />
  <MultinaireSocialLoginButton
    width="100%"
    title="Continue with Apple"
    icon="Apple"
    backgroundColor="#000000"
    titleColor="#ffffff"
    onPress={() => signInWithApple()}
  />
</MultinaireContainer>