Standard sign-up entry point
Use the default Clerk control when no custom visual treatment is needed.
Clerk · Component
SignUpButton
SignUpButton is an unstyled React trigger for Clerk sign-up. It redirects to the sign-up route by default or opens sign-up in a modal when configured with mode="modal".
How it works
SignUpButton provides a clickable sign-up entry point. Without children it renders Clerk’s button; with one child, it can wrap a custom button, and its mode controls whether sign-up opens in a modal or redirects to the sign-up route.
Syntax
<SignUpButton mode="redirect"|"modal">{children}</SignUpButton>Parameters
| Name | Type | Description |
|---|---|---|
mode | 'redirect' | 'modal' | Controls click behavior: "redirect" navigates to the sign-up route, while "modal" opens sign-up on the current route; defaults to "redirect". |
children | React.ReactNode | The single custom element or text control wrapped by SignUpButton. |
Returns
A React button component that starts the Clerk sign-up flow.
Key points
- Use it as the standard trigger for navigating users to your application’s sign-up page.
- If no dedicated page exists, Clerk’s Account Portal hosts the sign-up destination.
- Wrap custom button markup or text when the default control does not match your UI.
- The redirect mode takes the user to the configured sign-up route.
- The modal mode keeps the user on the current route while showing sign-up.
Common mistakes
- Provide exactly one child. Group multiple visual elements inside one parent element.
Example: Custom modal sign-up button
import { SignUpButton } from '@clerk/react'
export default function App() {
return (
<SignUpButton mode="modal">
<button type="button">Create account</button>
</SignUpButton>
)
}Wrap a single button to open Clerk’s sign-up modal when clicked.
When to use it
Custom trigger styling
Wrap an application-styled button or label to match the surrounding interface.
Modal sign-up flow
Keep users on the current page while presenting the sign-up experience.
Interview questions
QWhat does SignUpButton do?
SignUpButton is a button that links to the app’s sign-up page by default. It can also open the sign-up experience in a modal when its mode is set accordingly.
Follow-up: How would you preserve custom button markup? Wrap that single button in SignUpButton and choose the desired mode.
QHow do you control the click behavior?
Set mode to "modal" to open sign-up on the current route. The default mode, "redirect", navigates to the sign-up route.
Follow-up: What happens if mode is omitted? Redirect behavior is used.
QHow do you customize the rendered button?
Pass one custom button or button label as the component’s child. The child becomes the UI users click to start sign-up.
Follow-up: How can multiple elements be used? Put them beneath one parent child element.
Related
SignInButtonSignUpSignInSignOutButton