<SignUpButton>
The <SignUpButton> component is a button that links to the sign-up page or displays the sign-up modal.
Properties
- Name
asChild?- Type
boolean- Description
For Astro only: If
true, the<SignUpButton>component will render its children as a child of the component.
- Name
forceRedirectUrl?- Type
string- Description
If provided, this URL will always be redirected to after the user signs up. It's recommended to use the environment variable instead.
- Name
fallbackRedirectUrl?- Type
string- Description
The fallback URL to redirect to after the user signs up, if there's no
redirect_urlin the path already. Defaults to/. It's recommended to use the environment variable instead.
- Name
signInForceRedirectUrl?- Type
string- Description
If provided, this URL will always be redirected to after the user signs in. It's recommended to use the environment variable instead.
- Name
signInFallbackRedirectUrl?- Type
string- Description
The fallback URL to redirect to after the user signs in, if there's no
redirect_urlin the path already. Defaults to/. It's recommended to use the environment variable instead.
- 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.
- Name
initialValues- Type
SignUpInitialValues- Description
The values used to prefill the sign-up fields with.
- Name
unsafeMetadata- Type
SignUpUnsafeMetadata- Description
Metadata that can be read and set from the frontend and the backend. Once the sign-up is complete, the value of this field will be automatically copied to the created user's unsafe metadata (
User.unsafeMetadata). One common use case is to collect custom information about the user during the sign-up process and store it in this property. Read more about unsafe metadata.
import { SignUpButton } from '@clerk/nextjs'
export default function Home() {
return <SignUpButton />
}import { SignUpButton } from '@clerk/clerk-react'
const SignUpPage = () => <SignUpButton />
export default SignUpPage---
import { SignUpButton } from '@clerk/astro/components'
---
<SignUpButton />import { SignUpButton } from '@clerk/remix'
export default function SignUpPage() {
return <SignUpButton />
}import { SignUpButton } from '@clerk/tanstack-start'
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/sign-up')({
component: SignUp,
})
function SignUp() {
return <SignUpButton />
}<script setup>
import { SignUpButton } from '@clerk/vue'
</script>
<template>
<SignUpButton />
</template>Custom usage
You can create a custom button by wrapping your own button, or button text, in the <SignUpButton> component.
import { SignUpButton } from '@clerk/nextjs'
export default function Home() {
return (
<SignUpButton>
<button>Custom sign up button</button>
</SignUpButton>
)
}import { SignUpButton } from '@clerk/clerk-react'
export default function Example() {
return (
<SignUpButton>
<button>Custom sign up button</button>
</SignUpButton>
)
}import { SignUpButton } from '@clerk/remix'
export default function Home() {
return (
<SignUpButton>
<button>Custom sign up button</button>
</SignUpButton>
)
}You must pass the asChild prop to the <SignUpButton> component if you are passing children to it.
---
import { SignUpButton } from '@clerk/astro/components'
---
<SignUpButton asChild>
<button>Custom sign up button</button>
</SignUpButton><script setup>
import { SignUpButton } from '@clerk/vue'
</script>
<template>
<SignUpButton>
<button>Custom sign up button</button>
</SignUpButton>
</template>Feedback
Last updated on