dioxus_clerk/components/
user_button.rs

1use crate::options::UserButtonOptions;
2use crate::options::UserProfileMode;
3use dioxus::prelude::*;
4
5/// Mounted Clerk user button UI.
6///
7/// # Example
8///
9/// ```no_run
10/// use dioxus::prelude::*;
11/// use dioxus_clerk::*;
12///
13/// #[component]
14/// fn HeaderAccountMenu() -> Element {
15///     rsx! {
16///         SignedIn {
17///             UserButton { class: "inline-flex" }
18///         }
19///     }
20/// }
21/// ```
22#[component]
23pub fn UserButton(
24    /// URL Clerk should use after sign-out.
25    #[props(into)]
26    after_sign_out_url: Option<String>,
27    /// URL Clerk should use after switching sessions in a multi-session app.
28    #[props(into)]
29    after_switch_session_url: Option<String>,
30    /// URL Clerk should use when adding another account.
31    #[props(into)]
32    sign_in_url: Option<String>,
33    /// Show the user's name next to the avatar when Clerk supports it.
34    show_name: Option<bool>,
35    /// Whether the user button menu should open by default on first render.
36    default_open: Option<bool>,
37    /// How the user button opens the user profile UI.
38    #[props(into)]
39    user_profile_mode: Option<UserProfileMode>,
40    /// User profile URL for navigation mode.
41    #[props(into)]
42    user_profile_url: Option<String>,
43    /// Raw options forwarded to the underlying `UserProfile` component.
44    user_profile_props: Option<serde_json::Value>,
45    /// Raw Clerk appearance object.
46    appearance: Option<serde_json::Value>,
47    /// Advanced options forwarded to Clerk, as a
48    /// [`UserButtonOptions`](crate::UserButtonOptions) builder or a raw
49    /// `serde_json::Value`. Explicit props win when both set the same Clerk
50    /// option key.
51    #[props(default = UserButtonOptions::from_value(serde_json::Value::Null), into)]
52    options: UserButtonOptions,
53    /// Optional id for the Clerk widget host `<div>` that clerk-js mounts
54    /// into. May also be set through the attribute spread; this prop wins
55    /// when both are present.
56    #[props(into)]
57    id: Option<String>,
58    /// Attributes (including `class`) spread onto the Clerk widget host
59    /// `<div>`.
60    #[props(extends = GlobalAttributes)]
61    attributes: Vec<Attribute>,
62    /// Rendered while the Clerk user button widget is mounting.
63    #[props(default = rsx! {})]
64    fallback: Element,
65) -> Element {
66    let options = options
67        .maybe_after_sign_out_url(after_sign_out_url)
68        .maybe_after_switch_session_url(after_switch_session_url)
69        .maybe_sign_in_url(sign_in_url)
70        .maybe_show_name(show_name)
71        .maybe_default_open(default_open)
72        .maybe_user_profile_mode(user_profile_mode)
73        .maybe_user_profile_url(user_profile_url)
74        .maybe_user_profile_props(user_profile_props)
75        .maybe_appearance(appearance)
76        .into_value();
77
78    super::widget::render(
79        super::widget::Widget::UserButton,
80        super::widget::WidgetProps::new(options, fallback, id, attributes),
81    )
82}
dioxus_clerk/components/user_button.rs

dioxus_clerk/components/
user_button.rs
