# <SignUpButton>

The `<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](https://clerk.com/docs/guides/account-portal/overview.md?sdk=nuxt) unless you have set up a [dedicated sign-up page](https://clerk.com/docs/nuxt/guides/development/custom-sign-in-or-up-page.md).

## Usage

### Basic usage

filename: pages/sign-up.vue
```vue
<script setup>
// Components are automatically imported
</script>

<template>
  <SignUpButton />
</template>
```

### Custom usage

You can create a custom button by wrapping your own button, or button text, in the `<SignUpButton>` component.

filename: pages/index.vue
```vue
<script setup>
// Components are automatically imported
</script>

<template>
  <SignUpButton>
    <button>Custom sign up button</button>
  </SignUpButton>
</template>
```

If you want to render multiple elements, wrap them in a single parent element:

```vue
<template>
  <SignUpButton>
    <button>
      <span>Get started</span>
      <span aria-hidden="true"> →</span>
    </button>
  </SignUpButton>
</template>
```

## Properties

| Name                                                            | Type                          | Description                                                                                                                                                                                                                                                                                                                                                                         |
| --------------------------------------------------------------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| forceRedirectUrl?                                               | string                        | If provided, this URL will always be redirected to after the user signs up. It's recommended to use the environment variable 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 instead.                                                                                                                                                                                                  |
| "redirect": Redirect to the OAuth provider on the current page. | "popup": Open a popup window. | 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 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 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. Only accepts one child; if you want to render multiple elements, wrap them in a single parent element.                                                                                                                                                                                                                            |
| initialValues                                                   | SignUpInitialValues           | The values used to prefill the sign-up fields with.                                                                                                                                                                                                                                                                                                                                 |
| unsafeMetadata                                                  | SignUpUnsafeMetadata          | 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. |

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)