<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>
  );
}

Props

Name	Type	Description
`redirectUrl`	`string`	Full URL or path to navigate after successful sign in or sign up. This is the same as setting `afterSignInUrl` and `afterSignUpUrl` to the same value.
`afterSignInUrl`	`string`	Full URL or path to navigate after successful sign in.
`afterSignUpUrl`	`string`	Full URL or path to navigate after successful sign up.