3.0.0
Component Reference
API Reference
Learning Center
<SignInButton />
Show a button that links to the sign-in URL or opens the sign-in modal
Overview
<SignInButton/> is a button that links to the sign-in page or displays the sign-in modal. By default, it is a <button> tag that says Sign in, 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 { SignInButton } from "@clerk/clerk-react";
3
​
4
// Next.js
5
import { SignInButton } from "@clerk/nextjs";
Copied!
Simple button
1
<SignInButton />
Copied!
Custom button, open a modal
1
<SignInButton mode="modal">
2
<button className="btn">
3
Sign in
4
</button>
5
</SignInButton>
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.hrefafterSignInUrl?
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.
Last modified 1mo ago
Copy link