export const title = "Social button components"
export const description = "Free and open-source React social button components built for modern applications and websites. These social buttons are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/base/buttons/social-button.tsx",
    rac: "https://react-spectrum.adobe.com/react-aria/Button.html"
}

import * as Demos from "@/components/base/buttons/social-buttons.demo.tsx";

<PreviewAndCode title="Social buttons example">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SocialButtonGroupBrandDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
         <ComponentCode component="social-buttons/SocialButtonGroupBrandDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this social button component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add social-button
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="base/social-button" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the social button components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Social button examples

Below are examples and variations of this social button component:

### Google social buttons {{ tocOnly:true }}

<PreviewAndCode title="Google social buttons">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 px-4 md:px-8 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
            <Demos.SocialButtonGoogleDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="social-buttons/SocialButtonGoogleDemo" />
    </TabPanel>
</PreviewAndCode>

### Facebook social buttons {{ tocOnly:true }}

<PreviewAndCode title="Facebook social buttons">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 px-4 md:px-8 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SocialButtonFacebookDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="social-buttons/SocialButtonFacebookDemo" />
    </TabPanel>
</PreviewAndCode>

### Apple social buttons {{ tocOnly:true }}

<PreviewAndCode title="Apple social buttons">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 px-4 md:px-8 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SocialButtonAppleDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="social-buttons/SocialButtonAppleDemo" />
    </TabPanel>
</PreviewAndCode>

### Twitter social buttons {{ tocOnly:true }}

<PreviewAndCode title="Twitter social buttons">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 px-4 md:px-8 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SocialButtonTwitterDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="social-buttons/SocialButtonTwitterDemo" />
    </TabPanel>
</PreviewAndCode>

### Figma social buttons {{ tocOnly:true }}

<PreviewAndCode title="Figma social buttons">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 px-4 md:px-8 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SocialButtonFigmaDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="social-buttons/SocialButtonFigmaDemo" />
    </TabPanel>
</PreviewAndCode>

### Dribble social buttons {{ tocOnly:true }}

<PreviewAndCode title="Dribble social buttons">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 px-4 md:px-8 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SocialButtonDribbleDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="social-buttons/SocialButtonDribbleDemo" />
    </TabPanel>
</PreviewAndCode>   

<Divider />

## Social button group examples

Below are examples and variations of this social button group component:

### Brand social buttons group {{ tocOnly:true }}

<PreviewAndCode title="Brand social buttons group">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 px-4 md:px-8 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SocialButtonGroupBrandDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="social-buttons/SocialButtonGroupBrandDemo" />
    </TabPanel>
</PreviewAndCode>

### Icons brand social buttons group {{ tocOnly:true }}

<PreviewAndCode title="Icons brand social buttons group">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 px-4 md:px-8 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SocialButtonGroupIconsBrandDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="social-buttons/SocialButtonGroupIconsBrandDemo" />
    </TabPanel>
</PreviewAndCode>

### Color social buttons group {{ tocOnly:true }}

<PreviewAndCode title="Color social buttons group">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 px-4 md:px-8 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SocialButtonGroupColorDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="social-buttons/SocialButtonGroupColorDemo" />
    </TabPanel>
</PreviewAndCode>

### Icons color social buttons group {{ tocOnly:true }}

<PreviewAndCode title="Icons color social buttons group">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 px-4 md:px-8 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SocialButtonGroupIconsColorDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="social-buttons/SocialButtonGroupIconsColorDemo" />
    </TabPanel>
</PreviewAndCode>

### Gray social buttons group {{ tocOnly:true }}

<PreviewAndCode title="Gray social buttons group">
    <ResizablePreview id="preview" className="rounded-[20px] flex items-center justify-center py-32 px-4 md:px-8 min-h-[400px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.SocialButtonGroupGrayDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="social-buttons/SocialButtonGroupGrayDemo" />
    </TabPanel>
</PreviewAndCode>