<SignUpButton>

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

Name	Type	Description
`redirectUrl?`	`string`	Full URL or path to navigate to 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 to after a successful sign in. Defaults to `/`. It's recommended to use the environment variable instead.
`afterSignUpUrl?`	`string`	The full URL or path to navigate to after a successful sign up. Defaults to `/`. It's recommended to use the environment variable instead.
`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'`
`children?`	`React.ReactNode`	Children you want to wrap the `<SignUpButton>` in.

Basic usage

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

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

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

pages/index.js
import { SignUpButton } from "gatsby-plugin-clerk";
 
export default function Home() {
  return (
    <div>
      <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 in the <SignUpButton> component.

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

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

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

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

Last updated on March 13, 2024

<SignUpButton> properties

How to use the <SignUp> button

Basic usage

Custom usage

`<SignUpButton>` properties

How to use the `<SignUp>` button