Search…
<SignUpButton />
Show a button that links to the sign-up URL or opens the sign-up modal

Overview

<SignUpButton/> is a button that links to the sign-up page or displays the sign-up modal. By default, it is a <button> tag that says Sign up, but it is completely customizable by passing children.

Usage

The component can be imported from our React or Next.js SDK:
1
// React
2
import { SignUpButton } from "@clerk/clerk-react";
3
4
// Next.js
5
import { SignUpButton } from "@clerk/nextjs";
Copied!

Simple button

1
<SignUpButton />
Copied!

Custom button, open a modal

1
<SignUpButton mode="modal">
2
<button className="btn">
3
Sign up
4
</button>
5
</SignUpButton>
Copied!

Props

Name
Description
mode
"redirect" (default) | "modal"
If mode is set to "redirect", the button will redirect to the sign-up page. If mode is set to "modal", the button will open a modal instead.
Defaults to "redirect".
redirectUrl?
string
Full URL or path to navigate to after successful sign in or sign up. Use this instead of setting afterSignInUrl and afterSignUpUrl to the same value. To return to the same URL, set to window.location.href
afterSignInUrl?
string
The full URL or path to navigate to after a successful sign in. Defaults to the Sign-in URL on the Paths page of your Dashboard.
afterSignUpUrl?
string
The full URL or path to navigate to after a successful sign up. Defaults to the Sign-up URL on the Paths page of your Dashboard.