<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

// React
import { SignUpButton } from "@clerk/clerk-react";

// Next.js
import { SignUpButton } from "@clerk/nextjs";

Simple button

<SignUpButton />

<SignUpButton mode="modal">
  <button className="btn">
    Sign up
  </button>
</SignUpButton>

Props

Name	Type	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.

<SignUpButton />

Show a button that links to the sign-up URL or opens the sign-up modal

Usage

Simple button

Custom button, open a modal

Props​

Props