Social Button

Pre-styled buttons for social authentication and sharing with consistent width and icon styling.

Installation

Usage

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.

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
• All standard button HTML attributes are supported

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