Social Button

Stable

Pre-styled social login and sign-in buttons with brand colors, icons, and three theme options. Supports 12 social providers out of the box.

Brand Theme

Full brand-colored backgrounds matching each provider's identity guidelines.

Brand — Sign In Group

Brand — More Providers

Color Theme

Glass-style buttons with colored icons on a neutral background. Blends with the Omnira UI design system.

Color — Sign In Group

Gray Theme

Monochrome buttons using the current text color. Minimal and unobtrusive.

Gray — Sign In Group

Icon Only

Compact icon-only buttons for tight layouts. Omit the children prop to render icon-only mode.

Icon Only — Brand

Icon Only — Color

Icon Only — Gray

Per-Provider Showcase

Each provider shown across all three themes with both full-width and icon-only variants.

Apple — All Themes

Google — All Themes

GitHub — All Themes

Sizes

Three size options for different contexts.

Sizes

Usage

Import the SocialButton component and use it in your application.

tsx
import { SocialButton } from "omnira-ui/SocialButton";

export default function LoginPage() {
    return (
        <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 360 }}>
            <SocialButton social="google" theme="brand">
                Sign in with Google
            </SocialButton>
            <SocialButton social="github" theme="color">
                Sign in with GitHub
            </SocialButton>
            <SocialButton social="apple" theme="gray">
                Sign in with Apple
            </SocialButton>

            {/* Icon-only mode — omit children */}
            <div style={{ display: "flex", gap: 12 }}>
                <SocialButton social="google" theme="color" />
                <SocialButton social="github" theme="color" />
                <SocialButton social="apple" theme="color" />
            </div>
        </div>
    );
}

Props

PropTypeDefaultDescription
social"google" | "facebook" | "apple" | "github" | "x" | "linkedin" | "microsoft" | "discord" | "slack" | "figma" | "dribbble" | "spotify"—Social provider to render
theme"brand" | "color" | "gray""brand"Visual theme — brand colors, colored icon on neutral, or monochrome
size"sm" | "md" | "lg""md"Button size
childrenReactNodeundefinedButton label. Omit for icon-only mode
disabledbooleanfalseDisabled state