SocialLoginButton

OAuth/social login buttons with customizable styling.

Basic Usage

import { SocialLoginButton } from '@multinaire/ui';

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

Props

Prop	Type	Default	Description
title	string	—	Button label text
icon	IconName	—	Icon name displayed inside the button
iconType	IconType	—	Iconsax icon style variant
iconColor	ColorKeys	—	Icon color key from the active theme palette
titleColor	string	—	Custom foreground color for the title text (accepts any CSS/RN color string)
backgroundColor	string	—	Custom background color (accepts any CSS/RN color string)
flex	number	—	Flex grow value
width	DimensionValue	—	Fixed width of the button
height	DimensionValue	theme medium	Fixed height of the button. Defaults to the theme's medium height
margin	SpacingProps	—	Outer margin
isLoading	boolean	false	Show a loading animation and disable the button
testID	string	title	Test identifier for UI automation. Defaults to the title value
onPress	() => void	—	Press handler. When omitted the button renders in a disabled (dimmed) state

Examples

Google Sign-In

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

Apple Sign-In

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

Facebook Sign-In

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

Full Width Login Options

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