Skip to Content
You are viewing a beta version of Clerk Docs
Visit the latest docs
Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.com

<SignInButton>

The <SignInButton> component is a button that links to the sign-in page or displays the sign-in modal.

<SignInButton> properties

NameTypeDescription
redirectUrl?stringFull URL or path to navigate to after successful sign in or sign up.
The same as setting afterSignInUrl and afterSignUpUrl to the same value.
afterSignInUrl?stringThe full URL or path to navigate to after a successful sign in. Defaults to /. It's recommended to use the environment variable instead.
afterSignUpUrl?stringThe full URL or path to navigate to after a successful sign up. Defaults to /. It's recommended to use the environment variable instead.
mode?'redirect' | 'modal'Determines what happens when a user clicks on the <SignInButton>. Setting this to 'redirect' will redirect the user to the sign-in route. Setting this to 'modal' will open a modal on the current route.
Defaults to 'redirect'.
children?React.ReactNodeChildren you want to wrap the <SignInButton> in.

How to use the <SignInButton> component

Basic usage

pages/index.js
import { SignInButton } from "@clerk/nextjs"; export default function Home() { return ( <div> <SignInButton /> </div> ); }
example.js
import { SignInButton } from "@clerk/clerk-react"; export default function Example() { return ( <div> <SignInButton /> </div> ); }
pages/index.js
import { SignInButton } from "@clerk/remix"; export default function Home() { return ( <div> <SignInButton /> </div> ); }
pages/index.js
import { SignInButton } from "gatsby-plugin-clerk"; export default function Home() { return ( <div> <SignInButton /> </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 <SignInButton> component.

pages/index.js
import { SignInButton } from "@clerk/nextjs"; export default function Home() { return ( <div> <SignInButton> <button>Sign in with Clerk</button> </SignInButton> </div> ); }
example.js
import { SignInButton } from "@clerk/clerk-react"; export default function Example() { return ( <div> <SignInButton> <button>Sign in with Clerk</button> </SignInButton> </div> ); }
pages/index.js
import { SignInButton } from "@clerk/remix"; export default function Home() { return ( <div> <SignInButton> <button>Sign in with Clerk</button> </SignInButton> </div> ); }
pages/index.js
import { SignInButton } from "gatsby-plugin-clerk"; export default function Home() { return ( <div> <SignInButton> <button>Sign in with Clerk</button> </SignInButton> </div> ); }

Last updated on March 13, 2024

What did you think of this content?

Clerk © 2024