v2.3Lead Capture

Social Login Buttons

OAuth provider buttons (Google, GitHub, Apple, Microsoft, Twitter, LinkedIn) for reducing signup friction. Built-in inline SVG icons for 6 named providers; custom providers supported. UI only, so consumers wire their own auth.

Read the pattern View source on GitHub

Live preview

Rendered with real component code. Each example demonstrates a documented variant.

All six providers

Default stacked layout with the six built-in providers. Each button resolves its icon and label automatically.

Row layout with three providers

Row layout wraps buttons horizontally. Useful when space is wide and you want a compact grouping.

With divider text

Pass dividerText to render a separator below the buttons. Pair with a sibling email form.

or sign in with email

React props

Configure the component via props in React or via attributes in HTML.

Prop	Type	Default	Description
providers	Provider[]	required	Ordered list of providers to render. Each item is `{ id, label?, icon? }`. Built-in icons resolve for google, github, apple, microsoft, twitter, and linkedin.
onProviderClick	(providerId: string) => void \| Promise<void>	required	Called with the provider id when a button is clicked. Wire your auth flow here; the component is UI only.
layout	"stacked" \| "row"	"stacked"	Stacked renders buttons vertically at full width. Row renders them horizontally with wrapping.
dividerText	string	undefined	If set, renders a labelled separator below the buttons. Intended to sit between these buttons and a sibling email form.
style	"default" \| "minimal"	"default"	Default applies neutral themed styling. Minimal is text-only with no provider-specific coloring.
className	string	undefined	Extra class applied to the root element.

HTML usage

The HTML variant uses the same shared styles and class names. Drop into any stack.

<link rel="stylesheet" href="path/to/social-login-buttons/styles.css">

<!-- Stacked (default) layout -->
<div class="slb slb--stacked slb--default">
  <button class="slb__button" type="button" data-provider="google">
    <svg class="slb__icon" viewBox="0 0 24 24" aria-hidden="true" fill="none"><!-- Google SVG paths --></svg>
    <span class="slb__label">Continue with Google</span>
  </button>

  <button class="slb__button" type="button" data-provider="github">
    <svg class="slb__icon" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><!-- GitHub SVG path --></svg>
    <span class="slb__label">Continue with Github</span>
  </button>

  <button class="slb__button" type="button" data-provider="apple">
    <svg class="slb__icon" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><!-- Apple SVG path --></svg>
    <span class="slb__label">Continue with Apple</span>
  </button>
</div>

<!-- Row layout with divider -->
<div class="slb slb--row slb--default">
  <button class="slb__button" type="button" data-provider="google">
    <svg class="slb__icon" viewBox="0 0 24 24" aria-hidden="true" fill="none"><!-- Google SVG paths --></svg>
    <span class="slb__label">Continue with Google</span>
  </button>

  <button class="slb__button" type="button" data-provider="github">
    <svg class="slb__icon" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><!-- GitHub SVG path --></svg>
    <span class="slb__label">Continue with Github</span>
  </button>

  <div class="slb__divider" role="separator" aria-label="or sign in with email">
    <span class="slb__divider-text">or sign in with email</span>
  </div>
</div>

<script>
(function () {
  document.querySelectorAll('.slb__button').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var providerId = btn.getAttribute('data-provider');
      // Initiate your OAuth flow here, e.g.:
      // window.location.href = '/auth/' + providerId;
      console.log('Provider clicked:', providerId);
    });
  });
}());
</script>

Customization

Override these CSS custom properties to integrate the component into your brand.

.slb {
  --slb-button-bg: var(--brand-surface, #ffffff);
  --slb-button-border: var(--brand-border, #d1d5db);
  --slb-button-text-color: var(--brand-ink, #111827);
  --slb-button-bg-hover: var(--brand-surface-hover, #f3f4f6);
  --slb-button-padding: 0.75rem 1.25rem;
  --slb-icon-size: 1.25rem;
  --slb-gap: 0.75rem;
  --slb-button-radius: 0.5rem;
  --slb-button-font-size: 0.9375rem;
  --slb-button-font-weight: 500;
  --slb-divider-color: var(--brand-border, #d1d5db);
  --slb-divider-text-color: var(--brand-muted, #6b7280);
  --slb-transition: 150ms ease;
}