# ElvixSignInButton

> Drop-in 'Sign in with elvix' button. Four variants by three sizes by four shapes. The cheapest entry point: one line and you have a working sign-in flow.

<!-- components/nav.tsx -->
```tsx
"use client";

import { ElvixSignInButton } from "@elvix.is/sdk/react";
import { useRouter } from "next/navigation";

export function Nav() {
  const router = useRouter();
  return (
    <ElvixSignInButton
      variant="filled"
      shape="pill"
      size="md"
      label="Continue with elvix"
      onResult={(r) => {
        if (!r.ok) return console.warn(r.error, r.message);
        if (r.ok && r.token) {
          const secure = location.protocol === "https:" ? "; secure" : "";
          document.cookie = `elvix_token=${r.token}; path=/; samesite=lax${secure}`;
        }
        router.push(r.redirect ?? "/app");
      }}
    />
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `label` | `string` | optional | `"Sign in with elvix"` | Button text. Override when you want a verb that matches your product copy. |
| `variant` | `"filled" \| "outline" \| "ghost" \| "white"` | optional | `"filled"` | Visual treatment. Filled is the brand chord; white is for dark-mode heroes. |
| `size` | `"sm" \| "md" \| "lg"` | optional | `"md"` | Height + padding scale. Matches the host's button scale at md. |
| `shape` | `"square" \| "rounded" \| "pill" \| "circle"` | optional | `"rounded"` | Corner radius. Pill for marketing surfaces, square for forms. |
| `theme` | `"auto" \| "light" \| "dark"` | optional | `"auto"` | Chord the button paints for. `auto` adopts the surrounding `<ElvixProvider>` resolved theme (system-aware), falling back to light. An explicit `light` / `dark` wins. Stops outline / ghost from painting white-on-white on a light surface. |
| `mode` | `"redirect" \| "popup"` | optional | `"redirect"` | Where the sign-in flow renders. Redirect bounces to elvix.is and back; popup opens an in-frame window. |
| `onResult` | `(r: ElvixSignInResult) => void` | optional | — | Terminal callback. Same discriminated union as `<ElvixSignIn>`. Fires once per attempt with `ok`, `token`, `redirect`, `error`, `message`. |
| `brandColor` | `string` | optional | elvix lavender (#6c5ce7) | Overrides the brand chord on `variant="filled"`. Use the host's own brand. |
| `onBrandColor` | `string` | optional | `"#ffffff"` | Foreground (shield + label) on top of `brandColor`. Pick a WCAG-AA contrast pair. |
| `align` | `"left" \| "center" \| "right"` | optional | `"center"` | Content alignment inside the button. Combine with `className="w-full"` for a full-width hero CTA. |
| `fontSize` | `number \| string` | optional | from `size` preset | Override the label font size. Number is treated as px; string is any CSS length. |
| `borderRadius` | `number \| string` | optional | from `shape` preset | Custom corner radius. Wins over `shape`. Number is px; string is any CSS length (`"8px"`, `"50%"`). |

> **Note:** Mount with no props and you still get a working flow (default chord, default verb, default factor stack from Console). The SDK handles the round-trip and lands the user back at your `redirectAfterSignIn` config.

> **Note:** Need the full surface (passkey + OTP + Google in one frame) inline on the page instead of behind a button? Reach for [`ElvixSignInForm`](/docs/components/elvix-sign-in-form.md) (also exported as `ElvixSignIn`). The button is the in-nav / footer / hero affordance; the form is the surface itself — and it can present itself as a modal or drawer from its own trigger if you want the overlay without wiring one.


## Related

- [ElvixSignInForm](/docs/components/elvix-sign-in-form.md): The full branded sign-in surface (card, header, brand wash, every Console-enabled method, Secured-by-elvix badge). Exported as both `ElvixSignInForm` and the short alias `ElvixSignIn` — same component.
- [ElvixSignOutButton](/docs/components/elvix-sign-out-button.md): Symmetric counterpart of `<ElvixSignInButton>`. One click invalidates the elvix session server-side, clears the SDK's local token, drops the `elvix_token` cookie, then navigates.