# Social Button Google Default - Google default

> Google social button — default style.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/social-button-social-button-google-default).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/social-button-social-button-google-default
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/social-button-social-button-google-default-light-535318cc152af89e.png
- Registry item: https://shadcnblocks.com/r/social-button-social-button-google-default.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/social-button-social-button-google-default.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `cn`, `radix-ui`, `react-icons`
- Registry items: `button`

## Files

### `example/social-button/social-button-google-default.tsx`

```tsx
import { SocialButton } from "@/components/shadcnblocks/social-button";

export const title = "Google default";

const Example = () => <SocialButton provider="google" variant="default" />;

export default Example;
```

### `components/shadcnblocks/social-button.tsx`

```tsx
import { Slot } from "radix-ui";
import {
  FaApple,
  FaDiscord,
  FaFacebook,
  FaGithub,
  FaLinkedin,
  FaMicrosoft,
  FaXTwitter,
} from "react-icons/fa6";
import { FcGoogle } from "react-icons/fc";
import { cn } from "cn";

import { buttonVariants } from "@/components/ui/button";
export type SocialProvider =
  | "google"
  | "github"
  | "apple"
  | "microsoft"
  | "twitter"
  | "discord"
  | "facebook"
  | "linkedin";

type SocialButtonVariant = "default" | "outline";

const providerConfig: Record<
  SocialProvider,
  { icon: React.ComponentType<{ className?: string }>; label: string }
> = {
  google: { icon: FcGoogle, label: "Continue with Google" },
  github: { icon: FaGithub, label: "Continue with GitHub" },
  apple: { icon: FaApple, label: "Continue with Apple" },
  microsoft: { icon: FaMicrosoft, label: "Continue with Microsoft" },
  twitter: { icon: FaXTwitter, label: "Continue with X" },
  discord: { icon: FaDiscord, label: "Continue with Discord" },
  facebook: { icon: FaFacebook, label: "Continue with Facebook" },
  linkedin: { icon: FaLinkedin, label: "Continue with LinkedIn" },
};

export interface SocialButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  provider: SocialProvider;
  variant?: SocialButtonVariant;
  showIconOnly?: boolean;
  asChild?: boolean;
}

export const SocialButton = ({
  provider,
  variant = "default",
  showIconOnly = false,
  asChild = false,
  children,
  className,
  ...props
}: SocialButtonProps) => {
  const { icon: Icon, label } = providerConfig[provider];
  const Comp = asChild ? Slot.Root : "button";

  return (
    <Comp
      type={asChild ? undefined : "button"}
      className={cn(
        buttonVariants({
          variant,
          size: showIconOnly ? "icon" : "default",
        }),
        "gap-2",
        className,
      )}
      aria-label={showIconOnly ? label : undefined}
      {...props}
    >
      <Icon className="size-4 shrink-0" />
      {!showIconOnly && (children ?? label)}
    </Comp>
  );
};
```