Social Buttons

Usage

One component with a provider prop. The wording is yours.

<SocialButton provider="google" onClick={signIn}>Continue with Google</SocialButton>

Themes

From each provider's own colour down to a flat logo on the page surface.

Icon only

Leave out the children and the button goes square. Add an aria-label: the logo is the only label left.

Sizes

In a form

Full width and stacked.

Logos

Each logo belongs to its provider. Google and Apple publish rules for their buttons.

• Google sign in branding guidelines
• Sign in with Apple guidelines

Source

The button and the logos are separate files.

packages/ui/src/components/SocialButtons.tsx    # the button
packages/ui/src/components/socialLogos.tsx     # the provider marks

Last updated: 12 August 2026