Skip to main content

dioxus_clerk/components/
sign_out_button.rs

1use crate::options::SignOutOptions;
2use dioxus::prelude::*;
3
4/// Unstyled sign-out button that schedules `Clerk.signOut(...)`.
5///
6/// This component renders a native `<button>` and treats `children` as button
7/// contents. For design-system buttons that own their own DOM element, call
8/// [`crate::use_clerk`] from the button's click handler instead.
9///
10/// # Example
11///
12/// ```no_run
13/// use dioxus::prelude::*;
14/// use dioxus_clerk::*;
15///
16/// #[component]
17/// fn SignOutAction() -> Element {
18///     rsx! {
19///         SignOutButton { class: "btn btn-ghost", redirect_url: "/", "Sign out" }
20///     }
21/// }
22/// ```
23#[component]
24pub fn SignOutButton(
25    /// Full URL or path to navigate to after sign-out.
26    #[props(into)]
27    redirect_url: Option<String>,
28    /// Sign out a specific session id in multi-session applications.
29    #[props(into)]
30    session_id: Option<String>,
31    /// Advanced options forwarded to Clerk, as a
32    /// [`SignOutOptions`](crate::SignOutOptions) builder or a raw
33    /// `serde_json::Value`. Explicit props win when both set the same Clerk
34    /// option key.
35    #[props(default = SignOutOptions::from_value(serde_json::Value::Null), into)]
36    options: SignOutOptions,
37    /// Disable the generated `<button>`.
38    #[props(default)]
39    disabled: bool,
40    /// Attributes spread onto the generated `<button>` (`id`, `class`,
41    /// `title`, `aria-*`, `r#type`, ...). `r#type` defaults to `"button"` to
42    /// avoid accidental form submits.
43    #[props(extends = GlobalAttributes, extends = button)]
44    attributes: Vec<Attribute>,
45    /// Optional click handler, called before the sign-out action is scheduled
46    /// (matching Clerk React's ordering).
47    #[props(default, into)]
48    onclick: Callback<MouseEvent>,
49    /// Optional custom button contents. Defaults to `Sign out`.
50    #[props(default = rsx! { "Sign out" })]
51    children: Element,
52) -> Element {
53    let options = options
54        .maybe_redirect_url(redirect_url)
55        .maybe_session_id(session_id)
56        .into_value();
57
58    let clerk = crate::use_clerk();
59    super::button_host::button_host(
60        super::button_host::ButtonChrome {
61            attributes,
62            disabled,
63            onclick,
64            children,
65        },
66        move || clerk.sign_out_with_options(options.clone()),
67    )
68}