Kaapi UI
← Back to Design System

Social Button

Social authentication buttons with multiple platforms, themes and sizes.

Variants

Brand colors for each social platform

<SocialButton social="google" variant="brand">
  Continue with Google
</SocialButton>

Neutral gray style for all platforms

<SocialButton social="google" variant="gray">
  Continue with Google
</SocialButton>

Gray background with colorful icons

<SocialButton social="google" variant="color">
  Continue with Google
</SocialButton>

Icon Only Button

<SocialButton social="google" variant="brand" />

Sizes

<SocialButton social="google" size="sm|md|lg|xl|2xl">
  Button text
</SocialButton>

States

Disabled

<SocialButton social="google" disabled>
  Continue with Google
</SocialButton>

As Link

Sign in with GoogleSign in with FacebookSign in with Apple
<SocialButton social="google" href="/auth/google">
  Sign in with Google
</SocialButton>

API Reference

PropsTypeDefaultDescription
social"google" | "facebook" | "apple" | "twitter" | "figma" | "dribble"-The social platform to display.
variant?'brand' | 'gray' | 'color''brand'The visual style of the button.
size?'sm' | 'md' | 'lg' | 'xl' | '2xl''lg'The size of the button.
href?string-If provided, renders an anchor element instead of a button.
disabled?booleanfalseDisables the button.
className?string-Additional CSS classes to apply to the button.
children?ReactNode-Button content. If empty, renders as icon-only button.