Social Button

npx shadcn@latest add https://ui.saasflare.io/r/social-button.json

pnpm add @saasflare/ui

"use client"import { SocialButton } from "@saasflare/ui"/** A branded provider sign-in button. Visual only — wire `onClick` to your auth flow. */export function Demo() {    return <SocialButton provider="google" onClick={() => {}} />}

"use client"import { SocialButton } from "@saasflare/ui"/** Override the default label text per provider. */export function Demo() {    return (        <div className="flex flex-col gap-4 w-full max-w-sm">            <SocialButton provider="github" label="Sign up with GitHub" />            <SocialButton provider="google" label="Sign up with Google" />        </div>    )}

"use client"import { SocialButton } from "@saasflare/ui"/** Compact icon-only buttons for a horizontal provider row. */export function Demo() {    return (        <div className="flex flex-wrap items-center gap-3">            <SocialButton provider="google" iconOnly />            <SocialButton provider="apple" iconOnly />            <SocialButton provider="github" iconOnly />            <SocialButton provider="microsoft" iconOnly />            <SocialButton provider="twitter" iconOnly />        </div>    )}

"use client"import { SocialButton } from "@saasflare/ui"/** A full set of provider buttons, stacked for a sign-in screen. */export function Demo() {    return (        <div className="flex flex-col gap-4 w-full max-w-sm">            <SocialButton provider="google" />            <SocialButton provider="apple" />            <SocialButton provider="github" />            <SocialButton provider="microsoft" />            <SocialButton provider="twitter" />        </div>    )}