āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/reference/components/unstyled/sign-up-button ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<SignUpButton>'
description: The <SignUpButton> component is a button that links to the sign-up page or displays the sign-up modal.
sdk: astro, chrome-extension, expo, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vueThe <SignUpButton> component is a button that, by default, links to your app's sign-up page. Your sign-up page will be hosted by Clerk using the Account Portal unless you have set up a dedicated sign-up page.
export default function Home() { return <SignUpButton /> }
</If>
<If sdk="react">
```jsx {{ filename: 'src/App.tsx' }}
import { SignUpButton } from '@clerk/clerk-react'
function App() {
return <SignUpButton />
}
export default App
import { SignUpButton } from '@clerk/clerk-expo/web'
export default function SignUpPage() {
return <SignUpButton />
}
export default function SignUpPage() { return <SignUpButton /> }
</If>
<If sdk="remix">
```jsx {{ filename: 'src/routes/_index.tsx' }}
import { SignUpButton } from '@clerk/remix'
export default function Home() {
return <SignUpButton />
}
export default function Home() { return <SignUpButton /> }
</If>
<If sdk="tanstack-react-start">
```tsx {{ filename: 'app/routes/sign-up.tsx' }}
import { SignUpButton } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/sign-up')({
component: SignUp,
})
function SignUp() {
return <SignUpButton />
}
You can create a custom button by wrapping your own button, or button text, in the <SignUpButton> component.
export default function Home() { return ( <SignUpButton> <button>Custom sign up button</button> </SignUpButton> ) }
</If>
<If sdk="react">
```jsx {{ filename: 'src/App.jsx' }}
import { SignUpButton } from '@clerk/clerk-react'
function App() {
return (
<SignUpButton>
<button>Custom sign up button</button>
</SignUpButton>
)
}
export default App
---
import { SignUpButton } from '@clerk/astro/components'
---
<SignUpButton asChild>
<button>Custom sign up button</button>
</SignUpButton>
import { SignUpButton } from '@clerk/clerk-expo/web'
export default function Home() {
return (
<SignUpButton>
<button>Custom sign up button</button>
</SignUpButton>
)
}
export default function Home() { return ( <SignUpButton> <button>Custom sign up button</button> </SignUpButton> ) }
</If>
<If sdk="remix">
```tsx {{ filename: 'app/routes/_index.tsx' }}
import { SignUpButton } from '@clerk/remix'
export default function Home() {
return (
<SignUpButton>
<button>Custom sign up button</button>
</SignUpButton>
)
}
export default function Home() { return ( <SignUpButton> <button>Custom sign up button</button> </SignUpButton> ) }
</If>
<If sdk="nuxt">
```vue {{ filename: 'pages/index.vue' }}
<script setup>
// Components are automatically imported
</script>
<template>
<SignUpButton>
<button>Custom sign up button</button>
</SignUpButton>
</template>
export const Route = createFileRoute('/')({ component: Home, })
function Home() { return ( <SignUpButton> <button>Custom sign up button</button> </SignUpButton> ) }
</If>
## Properties
<Properties>
- `forceRedirectUrl?`
- `string`
If provided, this URL will always be redirected to after the user signs up. It's recommended to use [the environment variable](/docs/guides/development/clerk-environment-variables#sign-in-and-sign-up-redirects) instead.
---
- `fallbackRedirectUrl?`
- `string`
The fallback URL to redirect to after the user signs up, if there's no `redirect_url` in the path already. Defaults to `/`. It's recommended to use [the environment variable](/docs/guides/development/clerk-environment-variables#sign-in-and-sign-up-redirects) instead.
---
- `oauthFlow`
- `"redirect" | "popup" | "auto"`
Determines how OAuth authentication is performed. Accepts the following properties:
- `"redirect"`: Redirect to the OAuth provider on the current page.
- `"popup"`: Open a popup window.
- `"auto"`: Choose the best method based on whether the current domain typically requires the `"popup"` flow to correctly perform authentication.
Defaults to `"auto"`.
---
- `signInForceRedirectUrl?`
- `string`
If provided, this URL will always be redirected to after the user signs in. It's recommended to use [the environment variable](/docs/guides/development/clerk-environment-variables#sign-in-and-sign-up-redirects) instead.
---
- `signInFallbackRedirectUrl?`
- `string`
The fallback URL to redirect to after the user signs in, if there's no `redirect_url` in the path already. Defaults to `/`. It's recommended to use [the environment variable](/docs/guides/development/clerk-environment-variables#sign-in-and-sign-up-redirects) instead.
---
- `mode?`
- `'redirect' | 'modal'`
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'`
---
- `children?`
- `React.ReactNode`
Children you want to wrap the `<SignUpButton>` in.
---
- `initialValues`
- [`SignUpInitialValues`](/docs/reference/javascript/types/sign-up-initial-values)
The values used to prefill the sign-up fields with.
---
- `unsafeMetadata`
- [`SignUpUnsafeMetadata`](/docs/reference/javascript/types/metadata#sign-up-unsafe-metadata)
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](/docs/guides/users/extending#unsafe-metadata).
</Properties>
<If sdk="astro">
<Properties>
- `asChild?`
- `boolean`
If `true`, the `<SignUpButton>` component will render its children as a child of the component.
</Properties>
</If>
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā