<!-- source-hash: 18cb2f4cc768f6f9efb9b720bfbd1714 -->
A reusable OAuth provider sign-in button component that handles loading states, click propagation, and renders the appropriate provider icon and label.

## Key Components

### `ProviderButtonProps`
| Prop | Type | Description |
|------|------|-------------|
| `provider` | `'microsoft' \| 'google' \| 'slack' \| 'github'` | OAuth provider to render |
| `onClick` | `() => Promise<void> \| void` | Sign-in handler (sync or async) |
| `disabled` | `boolean` | Disables the button (default: `false`) |
| `loading` | `boolean` | External loading state override (default: `false`) |

### `PROVIDER_CONFIG`
Static map linking each provider key to its display name and icon component.

### `ProviderButton`
Main exported component. Manages an internal loading state that activates during async `onClick` execution, falling back gracefully when an external `loading` prop is passed. Stops click propagation to prevent accidental modal/backdrop dismissals.

## Usage Example

```typescript
import { ProviderButton } from './provider-button';

async function handleMicrosoftSignIn() {
  await signIn('microsoft');
}

// Basic usage
<ProviderButton provider="microsoft" onClick={handleMicrosoftSignIn} />

// With external loading control
const [loading, setLoading] = useState(false);

<ProviderButton
  provider="google"
  onClick={async () => {
    setLoading(true);
    await signIn('google');
    setLoading(false);
  }}
  loading={loading}
  disabled={loading}
/>
```

> **Note:** When `loading` is provided externally, internal loading state management is skipped to avoid state conflicts.