Social Button

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

npx @tailgrids/cli add social-button

Usage

Import the component and provide an icon and label.

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

const SocialButtonUsage = () => (
  <SocialButton>
    <GoogleIcon />
    Continue with Google
  </SocialButton>
);

export default SocialButtonUsage;

With Icon

Social buttons with a card-like shadow effect.

Disabled

disabled prop disables the button and reduces icon opacity and prevents interaction.

Note: Icons maintain 60% opacity when button is disabled.

Custom

Use custom styles or positioning to create unique social buttons for specific use cases.

API Reference

SocialButton

Extends button element props and inherits all Button component props.

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