Social Providers
1<ButtonSocial provider="google" />2<ButtonSocial provider="github" />3<ButtonSocial provider="twitter" />Custom Text
1<ButtonSocial provider="google">Sign in with Google</ButtonSocial>2<ButtonSocial provider="github">Login with GitHub</ButtonSocial>3<ButtonSocial provider="discord">Join our Discord</ButtonSocial>Icon Only
1<ButtonSocial provider="google" variant="icon" />2<ButtonSocial provider="github" variant="icon" />3<ButtonSocial provider="twitter" variant="icon" />Sizes
1<ButtonSocial provider="github" size="sm">Small</ButtonSocial>2<ButtonSocial provider="github" size="md">Medium</ButtonSocial>3<ButtonSocial provider="github" size="lg">Large</ButtonSocial>Icon Sizes
1<ButtonSocial provider="discord" variant="icon" size="sm" />2<ButtonSocial provider="discord" variant="icon" size="md" />3<ButtonSocial provider="discord" variant="icon" size="lg" />Login Form Example
Or continue with email
1<div className="space-y-3">2 <ButtonSocial provider="google" className="w-full" />3 <ButtonSocial provider="github" className="w-full" />Share Buttons
Share this article
1<div className="flex gap-2">2 <ButtonSocial provider="twitter" variant="icon" />3 <ButtonSocial provider="facebook" variant="icon" />Installation
npx zeroui@latest add button-socialProps
| name | type | default | description |
|---|---|---|---|
| provider | "google" | "github" | "twitter" | "facebook" | "apple" | "discord" | "linkedin" | "spotify" | - | - |
| variant | "default" | "outline" | "icon" | "default" | - |
| size | "sm" | "md" | "lg" | "md" | - |
| children | ReactNode | "Continue with {Provider}" | - |
| className | string | "" | - |
| disabled | boolean | false | - |