React Social Login Buttons

React Social Button components are used to display branded action buttons for social authentication or sharing. They are commonly seen in sign-in flows such as “Continue with Google”, “Sign in with GitHub”, or similar third-party actions.

This component focuses only on visual presentation. It does not handle authentication logic. It is built with React and styled using Tailwind CSS to ensure consistent sizing, alignment, and icon spacing across different providers.

Installation

Usage

Import the component and provide an icon and label.

import { SocialButton } from "@/registry/core/social-button";

export default () => (
  <SocialButton>
    <GoogleIcon />
    Continue with Google
  </SocialButton>
);

API Reference

SocialButton

Extends button element props and inherits all Button component props.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Button content (icon and text)
`className`	`string`	-	Additional CSS classes
`disabled`	`boolean`	`false`	Disable button interaction
`onClick`	`() => void`	-	Click event handler

Accessibility

Built on top of the Button component with all its accessibility features
Includes focus ring styling for keyboard navigation
Disabled state reduces icon opacity and prevents interaction
Icons inherit text color for consistent styling
Supports all standard button HTML attributes

Notes

Uses the Button component with appearance="outline" by default
Has a consistent max width of 336px (21rem) via max-w-84
Full width within the max-width constraint via w-full
Icons maintain 60% opacity when button is disabled
Typically used with brand icons from social platforms
Common pattern in authentication flows and social sharing features

Social Button