---
title: Connect Button
sidebarTitle: Connect Button
description: "Interactive preview for the @agg-build/auth ConnectButton surface"
---

> **For AI agents:** the complete documentation index is at [llms.txt](/llms.txt). Append `.md` to any page URL for its markdown version.

import { StorybookEmbed } from "/snippets/storybook-embed.jsx";

# Connect Button

`ConnectButton` is the high-touch auth surface for wallet, OAuth, and email sign-in flows.

Use Storybook as the source of truth for auth method combinations, interaction states, and runtime
behavior.

## Import

```tsx
import { AggAuthProvider, ConnectButton, createEmailAuthMethod } from "@agg-build/auth";
```

Requires both `<AggProvider>` from `@agg-build/hooks` and `<AggAuthProvider>` from
`@agg-build/auth`. Use the [Setup Guide](/api/setup) and [Authentication](/recipes/authentication)
pages for the full provider stack.

## Preview

<StorybookEmbed storyId="components-connect-button--playground" title="Connect Button" height={760} />