<SignUpButton />

The <SignUpButton /> component is a button that links to the sign-up page or displays the sign-up modal.

Usage

Basic usage

pages/index.js
import { SignUpButton } from "@clerk/nextjs";
 
export default function Home() {
  return (
    <div>
    <h1> Sign up </h1>
      <SignUpButton />
    </div>
  );
}

example.js
import { SignUpButton } from "@clerk/clerk-react";
 
export default function Example() {
  return (
    <div>
    <h1> Sign up </h1>
      <SignUpButton />
    </div>
  );
}

pages/index.js
import { SignUpButton } from "@clerk/remix";
 
export default function Home() {
  return (
    <div>
    <h1> Sign up </h1>
      <SignUpButton />
    </div>
  );
}

pages/index.js
import { SignUpButton } from "gatsby-plugin-clerk";
 
export default function Home() {
  return (
    <div>
    <h1> Sign up </h1>
      <SignUpButton />
    </div>
  );
}

Custom usage

In some cases you will want to use your own button, or button text. You can do that by wrapping your button up.

pages/index.js
import { SignUpButton } from "@clerk/nextjs";
 
export default function Home() {
  return (
    <div>
    <h1> Sign up </h1>
      <SignUpButton mode="modal">
        <button>
          Sign up
        </button>
      </SignUpButton>
    </div>
  );
}

example.js
import { SignUpButton } from "@clerk/clerk-react";
 
export default function Example() {
  return (
    <div>
    <h1> Sign up </h1>
      <SignUpButton mode="modal">
        <button>
          Sign up
        </button>
      </SignUpButton>
    </div>
  );
}

pages/index.js
import { SignUpButton } from "@clerk/remix";
 
export default function Home() {
  return (
    <div>
    <h1> Sign up </h1>
      <SignUpButton mode="modal">
        <button>
          Sign up
        </button>
      </SignUpButton>
    </div>
  );
}

pages/index.js
import { SignUpButton } from "gatsby-plugin-clerk";
 
export default function Home() {
  return (
    <div>
    <h1> Sign up </h1>
      <SignUpButton mode="modal">
        <button>
          Sign up
        </button>
      </SignUpButton>
    </div>
  );
}

Properties

Name	Type	Description
`redirectUrl`	`string`	Full URL or path to navigate after successful sign in or sign up. The same as setting `afterSignInUrl` and `afterSignUpUrl` to the same value.
`afterSignInUrl`	`string`	The full URL or path to navigate after a successful sign in.
`afterSignUpUrl`	`string`	The full URL or path to navigate after a successful sign up.
`mode`	`'redirect' \| 'modal'`	Determines what happens when a user clicks on the `<SignUpButton />`. Setting this to `'redirect'` will redirect the user to the sign-up route. Setting this to `'modal'` will open a modal on the current route. Defaults to 'redirect'`