# Social Login Button

“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.

> Composed · Pro · Actions — React Native, Expo Go compatible.

## Install

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

## Import

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

## Variants

- `icons` — Icon row: `npx @lumioui/cli add pro/social-login-button-icons`
- `passkey` — Passkey: `npx @lumioui/cli add pro/social-login-button-passkey`
- `stack` — Provider stack: `npx @lumioui/cli add pro/social-login-button-stack`

## Props

### SocialLoginButton

| Prop | Type | Notes |
| --- | --- | --- |
| `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) => 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 | Notes |
| --- | --- | --- |
| `direction?` | `"column" | "row"` | "column" stacks full-width buttons; "row" lays out glyph-only circles. Default "column". |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

### SocialLoginDivider

| Prop | Type | Notes |
| --- | --- | --- |
| `label?` | `string` | Text in the gap. Default "or". |
| `className?` | `string` | — |

## Icons rendered

- `mail` — /icons.html?i=mail
- `phone` — /icons.html?i=phone

Source: https://lumioui.com/components/social-login-button