Skip to main content

SignUpButton

Function SignUpButton 

Source
pub fn SignUpButton(_: SignUpButtonProps) -> Element
Expand description

Unstyled sign-up button that schedules the appropriate Clerk action.

This component renders a native <button> and treats children as button contents. For design-system buttons that own their own DOM element, call crate::use_clerk from the button’s click handler instead.

Props cover the options Clerk’s modal and redirect flows accept. Embedded UI options such as routing/path apply only to the mounted SignUp component, not to a button, so they are not exposed here.

§Example

use dioxus::prelude::*;
use dioxus_clerk::*;

#[component]
fn SignUpAction() -> Element {
    rsx! {
        SignUpButton { class: "btn btn-secondary", "Create account" }
    }
}

§Props

For details, see the props struct definition.

  • mode : AuthButtonMode

    Whether to open a modal or redirect. Defaults to redirect for Clerk React parity.

  • sign_in_url : Option<String>

    Full URL or path to the sign-in page used by Clerk’s sign-up flow.

  • waitlist_url : Option<String>

    Full URL or path to the waitlist page used by Clerk’s sign-up flow.

  • force_redirect_url : Option<String>

    Always redirect here after sign-up.

  • fallback_redirect_url : Option<String>

    Fallback redirect URL after sign-up.

  • sign_in_force_redirect_url : Option<String>

    Always redirect here after sign-in from sign-up.

  • sign_in_fallback_redirect_url : Option<String>

    Fallback redirect URL after sign-in from sign-up.

  • initial_values : Option<serde_json::Value>

    Raw Clerk initialValues object.

  • appearance : Option<serde_json::Value>

    Raw Clerk appearance object.

  • options : SignUpOptions

    Advanced options forwarded to Clerk, as a SignUpOptions builder or a raw serde_json::Value. Explicit props win when both set the same Clerk option key.

  • disabled : bool

    Disable the generated <button>.

  • attributes : Vec<Attribute>

    Attributes spread onto the generated <button> (id, class, title, aria-*, r#type, …). r#type defaults to "button" to avoid accidental form submits.

  • onclick : Callback<MouseEvent>

    Optional click handler, called before the Clerk action is scheduled (matching Clerk React’s ordering).

  • children : Element

    Optional custom button contents. Defaults to Sign up.