Installation
Usage
import ButtonSocial from "@/components/ruixen/button-social";
export default function LoginPage() {
return (
<div className="flex flex-col gap-3">
<ButtonSocial provider="google" />
<ButtonSocial provider="github" />
<ButtonSocial provider="twitter" />
<ButtonSocial provider="facebook" />
<ButtonSocial provider="apple" />
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
provider | "google" | "github" | "twitter" | "facebook" | "apple" | - | Social provider to display |
className | string | - | Additional CSS classes |
Features
- Five popular social providers
- Provider-specific branding and icons
- Consistent styling across providers
- Hover and focus states
- Light and dark mode support