Social Button

A sign-in button for a third-party provider like Google, GitHub, Slack or Apple, with the correct brand logo, color and label, plus icon-only and custom-provider SSO variants.

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

import { SocialButton } from "@/components/ui/social-button";

export default function SocialButtonDemo() {
  return (
    <div className="flex flex-col gap-3">
      <SocialButton brand="google" />
      <SocialButton brand="github" appearance="black" />
      <SocialButton brand="slack" appearance="white" />
    </div>
  );
}