---
title: "<OAuthButtonGroup />"
---

Renders all the OAuth buttons enabled on the project dashboard.

<div className="stack-white-image-showcase stack-250h">
  <img src="/imgs/oauth-button-group.png" alt="OAuthButtonGroup" className="stack-250h" />
</div>

<Info type="info">
If there are no OAuth providers enabled in the dashboard, this component will be empty.
</Info>

## Props

<PropTable
  props={[
    {
      name: "type",
      type: "'sign-in' | 'sign-up'",
      description: "Specifies whether the buttons text are for sign-in or sign-up (both are the same in terms of functionality)."
    }
  ]}
/>

## Example

```tsx
import { OAuthButtonGroup } from '@stackframe/stack';

export default function Page() {
  return (
    <div>
      <h1>Sign In</h1>
      <OAuthButtonGroup type='sign-in' />
    </div>
  );
}

```