Social Button

Social buttons allow users to authenticate or interact using third-party platforms. They include specialized branding and icons that adapt to the current theme.

Social Button Playground

Preview

Code

Controls

Platform:

Google

Apple

Github

Size:

Small

Default

Large

Show Text:

Disabled:

Installation

You can add the social button component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install @react-aria/focus @react-aria/interactions

Copy and paste the following code into your project.

SocialButton.tsx

BrandIcon.tsx

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

Social buttons are typically used for OAuth flows. They automatically handle the platform's brand colors and icons:

import { SocialButton } from '@versaui/ui/components/Button';
function SocialLogin() {
  return (
    <div className="flex flex-col gap-4">
      <SocialButton platform="google" />
      <SocialButton platform="apple" />
      <SocialButton platform="github" />
    </div>
  );
}

Variants

Size

Three sizes are available — small, default, and large:

<SocialButton platform="google" size="small" />
<SocialButton platform="google" size="default" />
<SocialButton platform="google" size="large" />

Icon Only

Set showText={false} to display only the platform icon:

<SocialButton platform="google" showText={false} />

Custom Text

You can provide custom children to override the default "Continue with {Platform}" text:

<SocialButton platform="google">
  Sign in with Google
</SocialButton>

Supported Platforms

Platform	Description
`google`	Google Sign-In
`apple`	Sign in with Apple
`microsoft`	Microsoft Account
`facebook`	Facebook Login
`x`	X (formerly Twitter)
`github`	GitHub OAuth
`linkedin`	LinkedIn Login
`discord`	Discord OAuth
`slack`	Slack Sign-In
`figma`	Figma OAuth

Accessibility

The Social Button component is fully accessible:

Keyboard navigation: Standard button behavior with focus indicators
Screen readers: Properly labeled buttons with accessible text
Semantic structure: Uses role="button" for correct interaction
Color contrast: Brand colors are adjusted to maintain contrast ratios

Prop	Type	Default	Description
`platform`	`'google' \| 'apple' \| 'microsoft' \| 'facebook' \| 'x' \| 'github' \| 'linkedin' \| 'discord' \| 'slack' \| 'figma'`	`'google'`	The social platform brand to display.
`size`	`'large' \| 'default' \| 'small'`	`'default'`	Size variant.
`showText`	`boolean`	`true`	Whether to show the "Continue with..." text.
`disabled`	`boolean`	`false`	Prevents interaction.
`children`	`ReactNode`	`'Continue with {Platform}'`	Custom button text.
`className`	`string`	`''`	Additional CSS classes.

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page