Social Buttons

Brand-coloured buttons for social login and sharing — OAuth sign-in flows, share actions, and connected account UIs.

Social Login — Full Label

The standard OAuth sign-in pattern: brand icon + "Continue with {Provider}". Width is driven by the longest label in the set so the stack aligns cleanly.

<!-- Google -->
<button class="sc-social-btn sc-social-btn--google w-full" type="button">
    <!-- Google SVG logo -->
    Continue with Google
</button>

<!-- GitHub -->
<button class="sc-social-btn sc-social-btn--github w-full" type="button">
    <!-- GitHub SVG logo -->
    Continue with GitHub
</button>

<!-- Pattern: sc-social-btn + sc-social-btn--{provider} -->
<!-- Available: --google --facebook --apple --x --github --linkedin -->

Icon-Only

Compact circle variant for share toolbars, profile connection lists, and footers. Always include aria-label.

sm · md · lg

Icon-only — always pair with aria-label

<button class="sc-social-btn sc-social-btn--github sc-social-btn--icon"
        type="button" aria-label="Sign in with GitHub">
    <!-- SVG logo -->
</button>

<!-- Size modifiers -->
<button class="sc-social-btn sc-social-btn--github sc-social-btn--icon sc-social-btn--sm" ...>
<button class="sc-social-btn sc-social-btn--github sc-social-btn--icon sc-social-btn--lg" ...>

Sizes

sm · md (default) · lg

<button class="sc-social-btn sc-social-btn--github sc-social-btn--sm">...</button>
<button class="sc-social-btn sc-social-btn--github">...</button>
<button class="sc-social-btn sc-social-btn--github sc-social-btn--lg">...</button>

States

Default

Disabled

Click "Loading" button to trigger spinner state

<!-- Loading state -->
<button class="sc-social-btn sc-social-btn--google min-w-[13rem]"
        :disabled="loading"
        x-data="{ loading: false }"
        @click="loading = true; signInWithGoogle().finally(() => loading = false)">
    <span x-show="loading" class="loading loading-spinner" style="width:16px;height:16px;"></span>
    <!-- logo svg -->
    <span x-text="loading ? 'Signing in…' : 'Continue with Google'"></span>
</button>

<!-- Disabled -->
<button class="sc-social-btn sc-social-btn--google" disabled>...</button>

Composition — Sign-in Card

A realistic OAuth login panel combining a full-label stack with an "or" divider and an email fallback.

Sign in to Acme

Choose a provider or use your email.

By continuing you agree to our Terms and Privacy Policy.

<div class="card bg-base-100 shadow-sm border border-zinc-200 p-8 max-w-sm">
    <h3 class="text-lg font-semibold mb-1">Sign in to Acme</h3>

    <div class="flex flex-col gap-3">
        <button class="sc-social-btn sc-social-btn--google w-full">...Google</button>
        <button class="sc-social-btn sc-social-btn--github w-full">...GitHub</button>
    </div>

    <div class="divider text-xs my-5">or</div>

    <input type="email" class="input input-bordered w-full" placeholder="you@example.com"/>
    <button class="btn btn-primary w-full mt-3">Continue with email</button>
</div>

Usage Notes

Brand colours are defined in .sc-social-btn--{provider} inside this page's <style> block. If you need them across multiple pages, move the rules into css/ui/design-system/button.css.
Google's brand guidelines require the exact four-colour logo and a white button background — don't tint or recolour the Google button. The other providers allow white logos on their brand colour.
Use w-full when stacking buttons vertically so they align to a consistent width. Don't stretch them horizontally in a toolbar row — icon-only or short labels work better there.
Always set :disabled="loading" and swap the logo for a spinner during the OAuth redirect to prevent double-clicks while the popup/redirect is opening.
Icon-only variants must have aria-label="Sign in with {Provider}" — there is no visible text for screen readers.