Social Login Button

Buttons

About

Sign-in buttons from the Create UI design system for 12 providers (Google, Apple, GitHub, Microsoft, Slack, X and more) plus SSO. Colorful, black and white appearances, three shapes, two sizes and an icon-only mode.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Social Login Button to your project and fits it to your theme.

Code

How Social Login Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { SocialLoginButton } from "@/components/ui/social-login-button"

export default function SocialLoginButtonDemo() {
  return (
    <div className="flex w-full items-center justify-center gap-24">
      <div className="flex flex-col items-center justify-center gap-3">
        <SocialLoginButton brand="google" appearance="white" />
        <SocialLoginButton brand="discord" appearance="white" />
        <SocialLoginButton brand="slack" appearance="white" />
        <SocialLoginButton brand="gitlab" appearance="white" />
        <div className="mt-3 flex flex-wrap items-center gap-2">
          <SocialLoginButton
            brand="google"
            appearance="white"
            iconOnly
            aria-label="Continue with Google"
          />
          <SocialLoginButton
            brand="discord"
            appearance="white"
            iconOnly
            aria-label="Continue with Discord"
          />
          <SocialLoginButton
            brand="slack"
            appearance="white"
            iconOnly
            aria-label="Continue with Slack"
          />
          <SocialLoginButton
            brand="gitlab"
            appearance="white"
            iconOnly
            aria-label="Continue with GitLab"
          />
        </div>
      </div>
      <div className="flex flex-col items-center justify-center gap-3">
        <SocialLoginButton brand="google" shape="pill" appearance="colorful" />
        <SocialLoginButton brand="discord" shape="pill" appearance="colorful" />
        <SocialLoginButton brand="slack" shape="pill" appearance="colorful" />
        <SocialLoginButton brand="gitlab" shape="pill" appearance="colorful" />
        <div className="mt-3 flex flex-wrap items-center gap-2">
          <SocialLoginButton
            brand="google"
            shape="pill"
            appearance="colorful"
            iconOnly
            aria-label="Continue with Google"
          />
          <SocialLoginButton
            brand="discord"
            shape="pill"
            appearance="colorful"
            iconOnly
            aria-label="Continue with Discord"
          />
          <SocialLoginButton
            brand="slack"
            shape="pill"
            appearance="colorful"
            iconOnly
            aria-label="Continue with Slack"
          />
          <SocialLoginButton
            brand="gitlab"
            shape="pill"
            appearance="colorful"
            iconOnly
            aria-label="Continue with GitLab"
          />
        </div>
      </div>
    </div>
  )
}