Social Login Button

Description

SocialLoginButton is a single-element component that renders a native <button> styled for "Continue with X" auth flows. Thirteen brand presets ship in (apple, behance, discord, dribbble, facebook, github, gitlab, google, linkedin, microsoft, slack, x, plus a generic sso for enterprise single sign-on). Each preset carries its own wordmark icon and label, so you select a brand and the visible "Continue with Apple" copy follows.

Reach for it on sign-in screens, sign-up modals, marketing CTAs, and any page where a user expects to authenticate with a third-party provider. The component fixes the width per size so a stacked column of providers lines up cleanly without manual sizing.

Don't use SocialLoginButton for generic in-product CTAs that aren't auth-related; use Button instead. If the goal is to send users to a storefront (App Store, Google Play, Chrome Web Store), use AppStoreBadge. If you only need a passive brand chip with no interaction, use Badge.

Installation

pnpm dlx @create-ui/cli add social-login-button

Usage

import { SocialLoginButton } from "@/components/ui/social-login-button"

<SocialLoginButton brand="google" />

Examples

Brands

brand is required and selects the preset icon plus the label that appears after "Continue with". Pick the preset matching the OAuth provider your handler routes to.

Appearance

appearance controls the surface treatment. colorful (default) paints the brand color and adds an inset highlight, the look most users expect on sign-in screens. black is a high-contrast solid for dense surfaces, and white is an outlined treatment that disappears into light backgrounds.

Sizes

Two sizes: lg (default, 44px tall, 300px wide) for primary auth surfaces, and md (36px tall, 250px wide) for tighter contexts like compact dialogs.

Shape

shape switches the corner radius. rounded (default) follows the size's radius scale, pill is fully rounded, and square strips the radius entirely.

Icon Only

iconOnly drops the label and renders a square button with just the brand glyph. Useful for compact auth bars next to an email/password form. Always provide an aria-label because the visible label is gone.

Custom Brand

Pass brand="custom" with a config object to plug in a provider that isn't shipped as a preset. config.icon is required; config.label and config.color are optional and default to "SSO" and "#000000".

Render As (asChild)

Pass asChild to slot in your own element (typically an <a> for a server-side OAuth redirect or a framework <Link>). The icon and label content are injected into the slotted child, so leave the child empty and pair it with an aria-label.

Accessibility

SocialLoginButton renders a native <button> by default, so keyboard interaction comes from the browser's button behavior. When asChild swaps the host to an <a>, defer to anchor keyboard semantics instead.

ARIA notes:

• The component sets no explicit role; the implicit <button> role (or <a> role under asChild) is used.
• For default (non-iconOnly) buttons, the visible "Continue with X" text serves as the accessible name, so no aria-label is required.
• When iconOnly is set, the visible label disappears. Always provide an aria-label describing the destination (e.g. aria-label="Continue with Google").
• The colorful inset overlay is rendered with aria-hidden="true" so it isn't announced.
• Under asChild, pass accessibility attributes (aria-label, rel, target) on the slotted child element rather than the SocialLoginButton wrapper.

Styling

Tailwind override: pass className to merge Tailwind classes with the component's CVA classes (via cn()):

<SocialLoginButton brand="google" className="w-full" />

Data slots and attributes: the component sets one slot for CSS targeting:

• data-slot="social-login-button" on the root element.

Target the button in CSS:

[data-slot="social-login-button"] {
  /* … */
}

Related Components

• Button: generic CTA when no third-party brand identity is involved.
• App Store Badge: outbound link to an app or extension store, not an auth provider.
• Badge: passive label or chip with no interaction.

API Reference

SocialLoginButton

Branded sign-in button for OAuth providers. Extends React.ComponentProps<"button">, so any standard button attribute (type, disabled, onClick, aria-*, etc.) is accepted. Under asChild, the same attributes pass through to whichever element you slot in.

Props

Variants