Social Button
Login buttons for 24 providers plus custom brands. Naming the brand supplies its logo, colour and accessible label together, so a stack of them cannot drift apart. Renders a button by default, or an anchor when given an href, since an OAuth start is a navigation.
Installation
You can add the social button component using our CLI or manually:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add social-buttonBrands
All 24 logos ship inline with the component, so an install pulls no icon package. The full-colour marks come from SVG Logos (CC0), the monochrome glyphs from Simple Icons (CC0), and the four brands Simple Icons no longer carries from Bootstrap Icons (MIT). Amazon has no full-colour mark upstream, so under white it falls back to its brand-tinted glyph.
type SocialBrand = | "google" | "apple" | "github" | "gitlab" | "microsoft" | "x" | "facebook" | "linkedin" | "discord" | "slack" | "figma" | "notion" | "dropbox" | "spotify" | "twitch" | "reddit" | "tiktok" | "instagram" | "telegram" | "whatsapp" | "amazon" | "bitbucket" | "auth0" | "okta" | "custom";Appearance
colorfulis the default: the brand's own colour in the same gradient-and-shadow recipe as the primary Button, so it reads as a BoardUI control rather than a pasted-in widget. black is the same shape in high-contrast solid. whiteis outlined, and the only one that shows each provider's real multi-colour mark, since on a saturated fill that artwork would fight the background. For a stack of several providers, prefer white: a column of competing brand fills makes no single option readable.
{/* Colorful: the brand colour in the primary Button's gradient (default) */}<SocialButton brand="google" appearance="colorful" />
{/* Black: the same shape in high-contrast solid */}<SocialButton brand="google" appearance="black" />
{/* White: outlined, and the one that shows the real multi-colour mark */}<SocialButton brand="google" appearance="white" />Sizes
medium (36px) and small(32px) are the base Button's own sizes to the pixel, radius and glyph size included, so these sit in a form beside a Button without a half-step in the rhythm. Both carry a fixed width (300px and 250px) so a column of providers lines up on its own; fullWidth hands that back to the container.
<SocialButton brand="slack" size="medium" /> {/* 36px, like Button medium */}<SocialButton brand="slack" size="small" /> {/* 32px, like Button small */}
{/* Drop the fixed width when the container should decide */}<SocialButton brand="slack" fullWidth />Icon only
A square button showing just the logo, for the row of alternatives under an email field. The brand name moves to aria-label, so the control still announces itself.
<SocialButton brand="google" appearance="white" iconOnly /><SocialButton brand="apple" appearance="white" iconOnly /><SocialButton brand="github" appearance="white" iconOnly />
{/* The brand name stays as the accessible name when the label is hidden */}Custom brand
For an identity provider that is not built in, pass brand="custom" with a config. Only icon is required: label defaults to SSO and color to black.
import { RiShieldKeyholeLine } from "@remixicon/react";
<SocialButton brand="custom" config={{ icon: <RiShieldKeyholeLine className="size-5" />, label: "Okta SSO", color: "#0f172a", }}/>
{/* label defaults to "SSO" and color to black */}<SocialButton brand="custom" config={{ icon: <RiShieldKeyholeLine className="size-5" /> }} />Labels
The default label is Continue with <Brand>. Pass children to say something else, since a sign-up screen and a login screen usually want different wording.
<SocialButton brand="google" /> {/* Continue with Google */}<SocialButton brand="google">Sign up with Google</SocialButton><SocialButton brand="google">Log in</SocialButton>Buttons and links
Passing href renders an anchor instead of a button. Most OAuth flows start by navigating to a provider URL, and an anchor gives that the right semantics, middle-click and keyboard behaviour for free.
{/* An OAuth start is a navigation, so pass href and get an anchor */}<SocialButton brand="github" href="/api/auth/github" />
{/* Otherwise it is a button */}<SocialButton brand="github" onClick={() => signIn("github")} />Trademarks
The logos are trademarks of their respective owners, included here so you can build a sign-in screen. Several providers publish rules for their login buttons covering colour, clear space and wording, Google and Apple in particular, so check those before shipping a production login.