<!-- source-hash: 0ff05b6970e5b50646e6f4906b4e794e -->
A reusable OAuth/SSO button component that renders a styled sign-in button for supported identity providers.

## Key Components

- **`ProviderButtonProps`** — Extends native `HTMLButtonElement` attributes with:
  - `provider` — Required. One of `'google' | 'microsoft' | 'slack' | 'github'`
  - `variant` — `'accent' | 'outline'` (default: `'outline'`)
  - `size` — `'default' | 'small-legacy'` (default: `'default'`)
  - `loading` — Optional boolean for loading state

- **`ProviderButton`** — `forwardRef` component wrapping the base `Button` UI primitive. Renders a full-width button with a default label of `"Sign in with {ProviderName}"` if no `children` are provided.

## Usage Example

```typescript
import { ProviderButton } from "@/components/provider-button"

// Default usage — label auto-generated
<ProviderButton provider="google" />

// With accent variant and custom label
<ProviderButton
  provider="microsoft"
  variant="accent"
  onClick={handleMicrosoftLogin}
>
  Continue with Microsoft
</ProviderButton>

// Compact size with loading state
<ProviderButton
  provider="github"
  size="small-legacy"
  loading={isAuthenticating}
  disabled={isAuthenticating}
/>
```

> **Note:** The `loading` prop is accepted via `ProviderButtonProps` and forwarded to the underlying `Button` primitive. Ensure the base `Button` component handles the `loading` state for visual feedback.