Social Button

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeSocialButtonExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeSocialButtonExample/></NativeScope>}

Brands

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.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="social-button" id="brands"/>}

Appearance

colorful is the default: the brand's own colour in the same gradient-and-shadow recipe as the primary Button, so it reads as a Helios UI control rather than a pasted-in widget. black is the same shape in high-contrast solid. white is 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.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="social-button" id="appearance"/>}

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.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="social-button" id="sizes"/>}

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.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="social-button" id="icon-only"/>}

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.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="social-button" id="custom-brand"/>}

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.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="social-button" id="labels"/>}

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.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="social-button" id="links"/>}

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.