Social Button

# Brok UI: Social Button (`social-button`)

A branded social sign-in button (Continue with Google, GitHub, Apple, and more) styled with semantic tokens and provider glyphs.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add social-button
```

## Usage

```blade
<div class="mx-auto flex w-full max-w-xs flex-col gap-3">
    <x-ui.social-button provider="google" block />
    <x-ui.social-button provider="github" block />
    <x-ui.social-button provider="apple" variant="solid" block />
</div>
```

## Props

- `provider` (string, default `google`) — Identity provider: google, github, apple, discord, x, microsoft, or gitlab. Falls back to google when unrecognised.
- `variant` (string, default `outline`) — solid maps to the button's default (filled) variant; anything else renders outline.
- `size` (sm|lg, default `md`) — Forwarded to the composed button; also scales the glyph.
- `label` (mixed|null, default `null`) — Overrides the generated "Continue with :provider" label.
- `block` (bool, default `false`) — Stretches the button to fill its container's width.

## Use when

- Use for explicit actions and commits; keep one action visually primary when several sit together.
- Offering a recognisable "Continue with Google/GitHub/Apple/…" sign-in or sign-up action.
- Needing a branded glyph rendered with semantic tokens instead of a hard-coded brand colour.

## Avoid when

- Do not use button treatment for navigation-only view changes when links, tabs, or radios describe state more clearly.
- A generic action with no identity provider behind it; use button instead.
- The provider is not in the built-in glyph set and a custom icon is required; compose button with an iconLeading slot instead.

## Anti-patterns

- Using a button for navigation-only state changes
- Presenting multiple equally dominant primary actions

## Rules

- Use the `<brok:social-button>` tag (or `<x-ui.social-button>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/social-button
- Registry JSON (files, props, contract): https://brokui.dev/r/open/social-button.json

@props([
    'provider' => 'google',
    'variant' => 'outline',
    'size' => 'md',
    'label' => null,
    'block' => false,
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $variant = $styles['normalizeVariant']($variant);
    // Well-known simple-icons glyph paths, rendered with fill="currentColor" so
    // no raw brand colour ships — brand identity comes from the recognisable mark.
    $glyphs = [
        'google' => '<path d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.344-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"/>',
        'google-default' => '<path d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.344-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"/>',
        'github' => '<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>',
        'apple' => '<path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701z"/>',
        'discord' => '<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/>',
        'x' => '<path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/>',
        'microsoft' => '<path d="M11.4 24H0V12.6h11.4V24zM24 24H12.6V12.6H24V24zM11.4 11.4H0V0h11.4v11.4zm12.6 0H12.6V0H24v11.4z"/>',
        'gitlab' => '<path d="M23.955 13.587l-1.342-4.135-2.664-8.189c-.135-.423-.73-.423-.867 0L16.418 9.45H7.582L4.919 1.263C4.783.84 4.185.84 4.05 1.262L1.386 9.451.044 13.587c-.121.375.014.789.331 1.023L12 23.054l11.625-8.443c.318-.235.453-.647.33-1.024"/>',
    ];

    $names = [
        'google' => 'Google',
        'google-default' => 'Google',
        'github' => 'GitHub',
        'apple' => 'Apple',
        'discord' => 'Discord',
        'x' => 'X',
        'microsoft' => 'Microsoft',
        'gitlab' => 'GitLab',
    ];

    $provider = isset($glyphs[$provider]) ? $provider : 'google';
    $buttonVariant = $variant === 'solid' ? 'default' : 'outline';
    $resolvedLabel = $label ?? __('Continue with :provider', ['provider' => $names[$provider]]);

    $iconSize = match ($size) {
        'sm' => 'size-4',
        'lg' => 'size-5',
        default => 'size-[1.125rem]',
    };
@endphp

<x-ui.button
    :variant="$buttonVariant"
    :size="$size"
    :class="$block ? 'w-full' : ''"
    data-slot="social-button"
    data-provider="{{ $provider }}"
    :aria-label="$resolvedLabel"
    {{ $attributes }}
>
    <x-slot:icon>
        <svg class="{{ $iconSize }} shrink-0" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
            {!! $glyphs[$provider] !!}
        </svg>
    </x-slot:icon>
    {{ $resolvedLabel }}
</x-ui.button>