Google Button

A styled authentication button for Google sign-in with icon and full variants, customizable tooltip, and seamless integration with shadcn Button.

A specialized authentication button for Google OAuth sign-in. Combines the Google logo with flexible sizing, intelligent tooltip display for icon mode, and customizable text. Perfect for authentication flows and social login implementations.

Installation

npx shadcn@latest add @grenish/google-button

This requires the @grenish registry in your components.json. See the installation guide for setup.

Manual Dependencies

If you prefer manual installation, add the base components:

npx shadcn@latest add button tooltip

Usage

import { GoogleButton } from "@/components/tools/google-button"

export default function LoginDemo() {
  return <GoogleButton onClick={() => handleGoogleAuth()} />
}

"use client";

import { Button } from "@/components/ui/button";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";
import { GoogleLogoIcon } from "@phosphor-icons/react/dist/ssr";
import * as React from "react";

// Types

type GoogleButtonSize =
  | "sm"
  | "default"
  | "lg"
  | "icon-xs"
  | "icon-sm"
  | "icon"
  | "icon-lg";

export interface GoogleButtonProps extends React.ComponentProps<typeof Button> {
  size?: GoogleButtonSize;
  tooltipText?: string;
}

// Config

const iconSizeClass: Record<GoogleButtonSize, string> = {
  sm: "size-3.5",
  default: "size-4",
  lg: "size-5",
  "icon-xs": "size-3",
  "icon-sm": "size-3.5",
  icon: "size-4",
  "icon-lg": "size-5",
};

const ICON_SIZES: GoogleButtonSize[] = [
  "icon-xs",
  "icon-sm",
  "icon",
  "icon-lg",
];

// Component

export function GoogleButton({
  className,
  variant = "outline",
  size = "default",
  tooltipText = "Google",
  type = "button",
  children,
  ...props
}: GoogleButtonProps) {
  const isIcon = ICON_SIZES.includes(size);
  const iconClass = iconSizeClass[size];

  const button = (
    <Button
      variant={variant}
      size={size}
      type={type}
      className={cn(className)}
      {...props}
    >
      <GoogleLogoIcon
        weight="duotone"
        className={cn(iconClass, !isIcon && "mr-2")}
      />
      {!isIcon && (children ?? <span>Continue with Google</span>)}
    </Button>
  );

  if (!isIcon) return button;

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>{button}</TooltipTrigger>
        <TooltipContent>
          <p>{tooltipText}</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Features

Icon and Full Variants: Display as compact icon button or full-width button with text
Google Logo: Duotone Google logo from Phosphor Icons for modern appearance
Smart Tooltips: Automatic tooltip display in icon mode for accessibility
Customizable Text: Override default "Continue with Google" text with children
Custom Tooltips: Configurable tooltip text via tooltipText prop
Button Inheritance: Extends shadcn Button with all variants and sizes
Ref Forwarding: Direct DOM element access via React.forwardRef
Type Safety: Fully typed with TypeScript interface extending Button props
Authentication Ready: Default type="button" prevents accidental form submissions
Accessible: Semantic HTML with proper ARIA labels for screen readers

Props

Prop

Type

Size Variants

Default (Default)

Medium button with Google logo and text—ideal for standard forms and login pages.

<GoogleButton />

Small

Small button with Google logo and text.

<GoogleButton size="sm" />

Large

Large button with prominent Google logo and text for hero sections and CTAs.

<GoogleButton size="lg" />

Icon Sizes

Icon

Compact button showing only the Google logo with tooltip on hover.

<GoogleButton size="icon" />

Icon Small

<GoogleButton size="icon-sm" />

Icon Extra Small

<GoogleButton size="icon-xs" />

Icon Large

<GoogleButton size="icon-lg" />

Style Variants

Outline (Default)

Classic outlined button style for secondary actions.

<GoogleButton variant="outline" />

Default

Solid button with default theme colors.

<GoogleButton variant="default" />

Ghost

Minimal ghost style button for toolbar or header placements.

<GoogleButton variant="ghost" />

Examples

Basic Authentication Button

Simple login button with default styling.

import { GoogleButton } from "@/components/tools/google-button"

export function GoogleAuthButton() {
  const handleGoogleAuth = () => {
    // Initiate Google OAuth flow
    window.location.href = "/api/auth/google"
  }

  return (
    <GoogleButton onClick={handleGoogleAuth} />
  )
}

Large button for prominent login page placement.

<div className="w-full max-w-md mx-auto">
  <GoogleButton
    size="lg"
    className="w-full"
    onClick={handleGoogleAuth}
  />
</div>

Icon Button in Header

Compact icon button for navigation header or toolbar.

<header className="flex items-center justify-between">
  <Logo />
  <nav>
    <GoogleButton
      size="icon"
      tooltipText="Sign in with Google"
      onClick={handleGoogleAuth}
    />
  </nav>
</header>

Google Button

On this page