# `PhiaUi.Components.SocialButton`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/buttons/social_button.ex#L1)

Platform-branded OAuth / social sign-in buttons.

Provides `social_button/1` for individual providers and
`social_button_group/1` for stacking multiple social buttons together.

Brand colors are applied via inline `style` attributes to keep the CSS
bundle minimal and to avoid Tailwind purging arbitrary color classes.

## Supported providers

`:google`, `:github`, `:apple`, `:twitter`, `:facebook`, `:discord`,
`:linkedin`, `:microsoft`, `:slack`, `:custom`

For `:custom`, render your own icon via the `:icon` slot.

## Variants

| Variant    | Appearance                                    |
|------------|-----------------------------------------------|
| `:branded` | Full brand color background + white text      |
| `:outline` | Border with bg-background, no brand fill      |
| `:ghost`   | Transparent, no border                        |

## Example

    <.social_button_group>
      <.social_button provider={:google} />
      <.social_button provider={:github} />
      <.social_button provider={:apple} />
    </.social_button_group>

    <.social_button provider={:google} label="Continue with Google" variant={:outline} />

    <.social_button provider={:github} icon_only={true} size={:lg} />

    <.social_button provider={:custom}>
      <:icon>
        <svg>...</svg>
      </:icon>
    </.social_button>

# `social_button`

Renders a platform-branded social sign-in button.

Brand colors are applied via `style` to avoid Tailwind arbitrary color issues.
The monochrome SVG icon inherits `color` from the button.

## Attributes

* `provider` (`:atom`) (required) - OAuth provider — controls brand color and icon. Must be one of `:google`, `:github`, `:apple`, `:twitter`, `:facebook`, `:discord`, `:linkedin`, `:microsoft`, `:slack`, or `:custom`.
* `label` (`:string`) - Override the default 'Sign in with X' label. Use nil for the default. Defaults to `nil`.
* `variant` (`:atom`) - Visual style — :branded fills with brand color. Defaults to `:branded`. Must be one of `:branded`, `:outline`, or `:ghost`.
* `size` (`:atom`) - Button size. Defaults to `:default`. Must be one of `:sm`, `:default`, or `:lg`.
* `icon_only` (`:boolean`) - When true, the text label is visually hidden (sr-only) but still accessible. Defaults to `false`.
* `loading` (`:boolean`) - Defaults to `false`.
* `disabled` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `icon` - Custom icon slot — only used when provider={:custom}.

# `social_button_group`

Renders a group of social sign-in buttons with consistent spacing.

## Attributes

* `orientation` (`:atom`) - Stack direction — :vertical (default) or :horizontal. Defaults to `:vertical`. Must be one of `:horizontal`, or `:vertical`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required) - social_button components.

---

*Consult [api-reference.md](api-reference.md) for complete listing*