Docs

You are viewing an archived version of the docs.Go to latest version

<SignUpButton>

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

<SignUpButton> properties

  • Name
    redirectUrl?
    Type
    string
    Description

    Full URL or path to navigate to after successful sign in or sign up.
    The same as setting afterSignInUrl and afterSignUpUrl to the same value.

  • Name
    afterSignInUrl?
    Type
    string
    Description

    The full URL or path to navigate to after a successful sign in.

  • Name
    afterSignUpUrl?
    Type
    string
    Description

    The full URL or path to navigate to after a successful sign up.

  • 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.

pages/index.js
import { SignUpButton } from "@clerk/nextjs";

export default function Home() {
  return (
    <div>
      <SignUpButton />
    </div>
  );
}
example.js
import { SignUpButton } from "@clerk/clerk-react";

export default function Example() {
  return (
    <div>
      <SignUpButton />
    </div>
  );
}
pages/index.js
import { SignUpButton } from "@clerk/remix";

export default function Home() {
  return (
    <div>
      <SignUpButton />
    </div>
  );
}
pages/index.js
import { SignUpButton } from "gatsby-plugin-clerk";

export default function Home() {
  return (
    <div>
      <SignUpButton />
    </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 <SignUpButton> component.

pages/index.js
import { SignUpButton } from "@clerk/nextjs";

export default function Home() {
  return (
    <div>
      <SignUpButton mode="modal">
        <button>
          Sign up
        </button>
      </SignUpButton>
    </div>
  );
}
example.js
import { SignUpButton } from "@clerk/clerk-react";

export default function Example() {
  return (
    <div>
      <SignUpButton mode="modal">
        <button>
          Sign up
        </button>
      </SignUpButton>
    </div>
  );
}
pages/index.js
import { SignUpButton } from "@clerk/remix";

export default function Home() {
  return (
    <div>
      <SignUpButton mode="modal">
        <button>
          Sign up
        </button>
      </SignUpButton>
    </div>
  );
}
pages/index.js
import { SignUpButton } from "gatsby-plugin-clerk";

export default function Home() {
  return (
    <div>
      <SignUpButton mode="modal">
        <button>
          Sign up
        </button>
      </SignUpButton>
    </div>
  );
}

Feedback

What did you think of this content?

Last updated on