Stepwise UI

Social Button

A sign-in button carrying the provider logo and a sensible default label. Google, GitHub and Apple are built in; any other provider works by passing your own icon. It wraps Button, so every Button prop - size, fullWidth, disabled, loading - passes straight through.

Installation

npx stepwise-ui add social-button
Installs button alongside it, since this is built on top of it.

Providers

The label defaults to “Continue with {Provider}”. Override label to say “Sign in with” or “Sign up with” instead - the wording should match what the button actually does.
import { SocialButton } from '@/components/stepwise/social-button'

<SocialButton provider="google" />
<SocialButton provider="github" label="Sign in with GitHub" />
<SocialButton provider="apple"  label="Sign up with Apple" />

Custom provider

Pass any string as provider along with your own icon and label. Both are required for an unknown provider, because there is no built-in name to build the sentence from.
// Any other provider: pass both `icon` and `label`, since there is no
// built-in name to phrase the button with.
<SocialButton
  provider="figma"
  label="Continue with Figma"
  icon={<FigmaLogo />}
/>

<SocialButton
  provider="slack"
  label="Continue with Slack"
  icon={<SlackLogo />}
/>

Props

PropTypeDescription
provider
'google' | 'github' | 'apple' | string
Built-in provider, or any other string for a custom one.
icon
ReactNode
The logo. Required when provider is not built in.
label
string
Button text. Defaults to "Continue with {Provider}". Required for a custom provider.
size
'sm' | 'default' | 'lg'
Button's size scale. Default 'default'.
fullWidth
boolean
Stretches to the width of its container.
href
string
Renders an <a> instead of a <button> - handy for an OAuth authorize URL.
Every other button attribute - onClick, disabled, type, aria-* - is forwarded.