> ## Documentation Index
> Fetch the complete documentation index at: https://docs.agg.market/llms.txt
> Use this file to discover all available pages before exploring further.

# Connect Button

> Interactive preview for the @agg-build/auth ConnectButton surface

export const StorybookEmbed = ({storyId, title = "Storybook preview", height = 320, baseUrl = "https://storybook.agg.market"}) => {
  const resolvedHeight = typeof height === "number" ? `${height}px` : height;
  const normalizedBaseUrl = baseUrl.endsWith("/") ? baseUrl.slice(0, -1) : baseUrl;
  const buildStorybookUrls = theme => {
    const iframeSearchParams = new URLSearchParams({
      id: storyId,
      viewMode: "story",
      singleStory: "true",
      shortcuts: "false",
      globals: `theme:${theme}`
    });
    const storybookSearchParams = new URLSearchParams({
      path: `/story/${storyId}`,
      globals: `theme:${theme}`
    });
    return {
      iframeSrc: `${normalizedBaseUrl}/iframe.html?${iframeSearchParams.toString()}`,
      storybookUrl: `${normalizedBaseUrl}/?${storybookSearchParams.toString()}`
    };
  };
  const lightUrls = buildStorybookUrls("light");
  const darkUrls = buildStorybookUrls("dark");
  return <div className="not-prose my-6 overflow-hidden rounded-2xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
      <div className="flex items-center justify-between gap-4 border-b border-zinc-200 px-4 py-3 dark:border-zinc-800">
        <p className="m-0 min-w-0 text-sm font-semibold text-zinc-900 dark:text-zinc-100">{title}</p>
        <div className="shrink-0">
          <a href={lightUrls.storybookUrl} target="_blank" rel="noreferrer" className="text-sm font-medium text-[#ED8200] hover:opacity-80 dark:hidden">
            Open in Storybook
          </a>
          <a href={darkUrls.storybookUrl} target="_blank" rel="noreferrer" className="hidden text-sm font-medium text-[#ED8200] hover:opacity-80 dark:inline">
            Open in Storybook
          </a>
        </div>
      </div>

      <iframe src={lightUrls.iframeSrc} title={`${title} light`} loading="lazy" className="block w-full border-0 bg-transparent dark:hidden" style={{
    height: resolvedHeight
  }} />
      <iframe src={darkUrls.iframeSrc} title={`${title} dark`} loading="lazy" className="hidden w-full border-0 bg-transparent dark:block" style={{
    height: resolvedHeight
  }} />
    </div>;
};

# 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 theme={null}
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} />