Component

Social Auth Button

Branded social sign-in buttons for Google, GitHub, Microsoft, and Apple, with a responsive row layout. Built on the outline Button.

Basic

One button per provider, each with its brand icon and a "Continue with …" label.

Installation

$pnpm add @refraction-ui/react-social-auth-button

Usage

tsx

import {
  SocialAuthButton,
  SocialAuthRow,
} from '@refraction-ui/react-social-auth-button'

export function SignIn() {
  return (
    <SocialAuthRow>
      <SocialAuthButton provider="google" lastUsed onClick={signInWithGoogle} />
      <SocialAuthButton provider="github" onClick={signInWithGitHub} />
      <SocialAuthButton provider="microsoft" onClick={signInWithMicrosoft} />
      <SocialAuthButton provider="apple" onClick={signInWithApple} />
    </SocialAuthRow>
  )
}

States

Loading swaps the brand icon for a spinner and disables interaction. Disabled greys out the button.

Last used

Highlight the provider the returning user signed in with last using a floating badge.

Last used

Row

SocialAuthRow lays buttons out in a single column on mobile and two columns from the sm breakpoint up.

Last used