<SignUpButton>
The <SignUpButton> component is a button that links to the sign-up page or displays the sign-up modal.
<SignUpButton> properties
- Name
redirectUrl?- Type
string- Description
Full URL or path to navigate to after successful sign in or sign up.
The same as settingafterSignInUrlandafterSignUpUrlto the same value.
- Name
afterSignInUrl?- Type
string- Description
The full URL or path to navigate to after a successful sign in.
- Name
afterSignUpUrl?- Type
string- Description
The full URL or path to navigate to after a successful sign up.
- Name
mode?- Type
'redirect' | 'modal'- Description
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'
- Name
children?- Type
React.ReactNode- Description
Children you want to wrap the
<SignUpButton>in.
import { SignUpButton } from "@clerk/nextjs";
export default function Home() {
return (
<div>
<SignUpButton />
</div>
);
}import { SignUpButton } from "@clerk/clerk-react";
export default function Example() {
return (
<div>
<SignUpButton />
</div>
);
}import { SignUpButton } from "@clerk/remix";
export default function Home() {
return (
<div>
<SignUpButton />
</div>
);
}import { SignUpButton } from "gatsby-plugin-clerk";
export default function Home() {
return (
<div>
<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 in the <SignUpButton> component.
import { SignUpButton } from "@clerk/nextjs";
export default function Home() {
return (
<div>
<SignUpButton mode="modal">
<button>
Sign up
</button>
</SignUpButton>
</div>
);
}import { SignUpButton } from "@clerk/clerk-react";
export default function Example() {
return (
<div>
<SignUpButton mode="modal">
<button>
Sign up
</button>
</SignUpButton>
</div>
);
}import { SignUpButton } from "@clerk/remix";
export default function Home() {
return (
<div>
<SignUpButton mode="modal">
<button>
Sign up
</button>
</SignUpButton>
</div>
);
}import { SignUpButton } from "gatsby-plugin-clerk";
export default function Home() {
return (
<div>
<SignUpButton mode="modal">
<button>
Sign up
</button>
</SignUpButton>
</div>
);
}Feedback
Last updated on