Fragments

SSO Button

An outline button carrying an identity provider's brand mark, plus a group that renders one per provider.

Formance
Docs

Installation#

npx shadcn@latest add @formance/sso-button

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  SsoButton,
  SsoButtonGroup,
  type TSsoProvider,
} from '@/components/ui-fragments/sso-button';
<SsoButtonGroup onProviderSelect={(provider) => signIn(provider)} />

The brand marks are inline SVG, so the component installs with no icon dependency of its own. GitHub draws in currentColor and follows the theme; Google and Microsoft keep their brand colours, which stay legible on both the light and the dark surface.

SsoButton forwards every Button prop, so variant, size, loading and disabled behave as they do anywhere else.

Examples#

Providers#

Three providers ship with the component: Google, GitHub and Microsoft. Each label defaults to `Continue with <provider>`.

Custom labels#

Pass `providers` to pick a subset and keep their order, and `labels` to replace the default wording of one provider.

Loading and disabled#

`loadingProvider` marks the one button whose redirect is in flight; `disabled` covers the whole group while a different sign-in path runs.

Login form#

The full sign-in card: logo, the provider group, an SSO separator, and an email field. This is the layout the Formance apps render at /sign-in.