MSQ Logo

Social Button

Social login buttons for Google, Facebook, Apple, and Twitter with multiple themes.

Installation

The SocialButton component is part of the design system. Import it from the UI package.

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

Usage

Use SocialButton with platform (google, facebook, apple, twitter) and theme. Copy the example below to get started.

Examples

Brand Theme

Color Theme

Gray Theme

Icon Only

API Reference

The SocialButton component displays a social login button (Google, Facebook, Apple, Twitter). It supports platform, theme, and supportingText. See the interface below for full prop details.

interface SocialButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  platform?: "google" | "facebook" | "apple" | "twitter"
  theme?: "brand" | "color" | "gray"
  supportingText?: boolean
  asChild?: boolean
}