Social Login Button

Pro

“Continue with” buttons for popular sign-in providers, email, passkey and phone. In a group, the other options fade while one signs in, and the button can then show who you’re signed in as.

Preview

Installation

npx @lumioui/cli add pro/social-login-button

Usage

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

Examples

Icon row

A running club's log-in where email is the main path and providers shrink to a row of 52pt round buttons under "or continue with".

Passkey

A bank's returning-user screen.

Provider stack

A notes app's sign-in: the black button leads, the outline providers line their glyphs up on the leading edge, email sits under the "or".

API reference

SocialLoginButton

Prop Type Default
provider* SocialProvider

Which sign-in method this button starts. Picks the glyph and default label.

 —
action "continue" | "signIn" | "signUp"

Verb for the default label — "Continue with…", "Sign in with…", "Sign up with…". Default "continue".

 —
label string

Override the label text entirely.

 —
tone Tone

Visual voice. Default "ink" for Apple (the black button), "outline" for everything else. "accent" fills with the scoped <Accent> colour.

 —
size "md" | "lg"

md 44pt (inline forms) · lg 52pt (auth screens). Default "lg".

 —
radius "pill" | "rounded"

Corner style. Default "pill".

 —
align "center" | "leading"

"center" keeps glyph + label together (Apple). "leading" pins the glyph to the left edge so a stack of buttons lines up. Default "center".

 —
iconOnly boolean

Render a round glyph-only button (needs nothing else; the label becomes the a11y label).

 —
lastUsed boolean

Show a "Last used" tag — a returning-user hint.

 —
lastUsedLabel string

Text for the last-used tag. Default "Last used".

 —
glyph React.ReactNode

Replace the provider mark with your own node (e.g. a custom icon).

 —
onPress
((e: GestureResponderEvent) => void) … ((e: GestureResponderEvent) => void) | ((e: GestureResponderEvent) => Promise<unknown>) | null

Press handler — may return a Promise; busy dots hold the mark's place until it settles.

 —
loading boolean

Force the loading state (busy dots, presses blocked).

 —
busyLabel string

Label while signing in. Default "Signing in…".

 —
signedIn boolean

Resolve on the button: the mark dims, a check draws, the label swaps to signedInLabel, then onSettled fires after a 700ms hold. Presses are blocked while signed in.

 —
signedInLabel string

Label once signed in, e.g. "Signed in as noor@…". Default "Signed in".

 —
onSettled () => void

Fires once the signed-in result has held — move on from here.

 —
haptic "light" | "medium" | false

Haptic on press. Default "light"; false to disable.

 —
className string

Extra classes for the container.

 —
textClassName string

Extra classes for the label.

 —

SocialLoginButtonGroup

Prop Type Default
direction "column" | "row"

"column" stacks full-width buttons; "row" lays out glyph-only circles. Default "column".

 —
className string —
children React.ReactNode —

SocialLoginDivider

Prop Type Default
label string

Text in the gap. Default "or".

 —
className string —