<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.jsimport { SignUpButton } from "@clerk/nextjs"; export default function Home() { return ( <div> <h1> Sign up </h1> <SignUpButton /> </div> ); }
example.jsimport { SignUpButton } from "@clerk/clerk-react"; export default function Example() { return ( <div> <h1> Sign up </h1> <SignUpButton /> </div> ); }
pages/index.jsimport { SignUpButton } from "@clerk/remix"; export default function Home() { return ( <div> <h1> Sign up </h1> <SignUpButton /> </div> ); }
pages/index.jsimport { 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.jsimport { SignUpButton } from "@clerk/nextjs"; export default function Home() { return ( <div> <h1> Sign up </h1> <SignUpButton mode="modal"> <button> Sign up </button> </SignUpButton> </div> ); }
example.jsimport { 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.jsimport { 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.jsimport { 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. |