Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

<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

NameTypeDescription
redirectUrlstringFull URL or path to navigate after successful sign in or sign up.
The same as setting afterSignInUrl and afterSignUpUrl to the same value.
afterSignInUrlstringThe full URL or path to navigate after a successful sign in.
afterSignUpUrlstringThe 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'`

What did you think of this content?

Clerk © 2023