Login — Single sign-on first

A provider-first login card with three stacked choices and email as a later-step alternative. Use when workplace or provider authentication is the main route.

ReactHTML

1440 × 900

Open in new tab

Component.tsx24 lines

export default function LoginSsoFirst() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="mx-auto max-w-sm rounded-lg border border-neutral-200 bg-white p-6 sm:p-8">
          <div className="flex items-center gap-2 font-semibold"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-6"><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></svg><span>Logo</span></div>
          <h1 className="mt-6 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Sign in</h1>
          <ul role="list" className="mt-8 grid gap-3">
            <li><button type="button" aria-label="Continue with primary provider name" className="w-full gap-2 inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0"><rect x="4" y="4" width="16" height="16" rx="3" /><path d="M8 12h8M12 8v8" /></svg><span className="min-w-0 text-balance leading-tight">Continue with provider name</span></button></li>
            <li><button type="button" aria-label="Continue with alternative provider name" className="w-full gap-2 inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0"><rect x="4" y="4" width="16" height="16" rx="3" /><path d="M8 12h8M12 8v8" /></svg><span className="min-w-0 text-balance leading-tight">Continue with provider name</span></button></li>
            <li><button type="button" aria-label="Continue with SSO" className="w-full gap-2 inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0"><rect x="4" y="4" width="16" height="16" rx="3" /><path d="M8 12h8M12 8v8" /></svg><span className="min-w-0 text-balance leading-tight">Continue with SSO</span></button></li>
          </ul>
          <div className="my-6 flex items-center gap-3 text-sm text-neutral-500"><span aria-hidden="true" className="h-px flex-1 bg-neutral-200" />or<span aria-hidden="true" className="h-px flex-1 bg-neutral-200" /></div>
          <form className="grid gap-5">
            <div><label htmlFor="login-sso-first-email" className="block text-sm font-medium text-neutral-900">Email</label><input id="login-sso-first-email" name="email" type="email" autoComplete="username" required placeholder="name@example.com" className="mt-2 h-10 w-full rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" /></div>
            <button type="submit" className="w-full inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Continue</button>
          </form>
          <p className="mt-6 text-sm text-neutral-500">By continuing, you accept the <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Terms</a> and <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Privacy policy</a>.</p>
        </div>
        <p className="mt-6 text-center text-sm"><a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Use a different workspace</a></p>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when most accounts enter through a provider or SSO. Pick login-centered-card when password entry should be visible immediately. Variations: reorder providers, reduce the list to one provider, or replace the workspace link with organization discovery.
Hierarchy: Logo and a 30px h1 lead to three 44px secondary provider buttons with decorative 20px glyphs. The first two labels are Continue with provider name; the last is Continue with SSO. Email and the full-width Continue action are secondary entry routes. A 14px terms note closes the card. Slots: title up to 4 words, provider names up to 3, terms note up to 15.
Responsive: The card remains one column and fills the 24px gutters below its 384px maximum width. At 640px vertical padding is 96px, card padding 32px and heading 36px. Provider labels may wrap into two lines within their 44px buttons on narrow screens; glyphs stay 20px.
Layout: A white section has a max-w-6xl 1152px container, 24px gutters and 64px vertical padding, 96px from 640px. A centred max-w-sm 384px card has a 1px neutral-200 border, 8px radius and 24px padding, 32px from 640px. Three full-width provider actions have 12px gaps. A hairline or divider separates the provider list from the email form; a workspace link sits 24px below the card.
States: Inputs are 40px high with a 1px neutral-300 border, 6px radius and 14px text. The 44px primary action changes neutral-900 to neutral-700 on hover with a 150ms colour transition. Text links change to neutral-600. All controls show a 2px neutral-900 keyboard-focus outline offset 2px. Provider buttons fill neutral-50 on hover with a 150ms colour transition. The two placeholder providers have distinct accessible names. All buttons are enabled; email continues to a later password step rather than showing one here.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│        ┌───────────────────────────────────────┐         │
│        │ Logo / Sign-in headline               │         │
│        │ [Glyph  Continue with provider name ] │         │
│        │ [Glyph  Continue with provider name ] │         │
│        │ [Glyph  Continue with SSO           ] │         │
│        │ ─────────────── or ────────────────   │         │
│        │ Email                                 │         │
│        │ [Continue                           ] │         │
│        │ Terms note                            │         │
│        └───────────────────────────────────────┘         │
│                   [Use a different workspace]            │
└──────────────────────────────────────────────────────────┘

View all

Login — Single sign-on first

Pattern notes

Login — Account picker with credential pane

Login — Card over full-bleed media

Login — Centred card

Login — Single sign-on first

Pattern notes

More in Login

Login — Account picker with credential pane

Login — Card over full-bleed media

Login — Centred card