feat: add button component on_click prop

gh-pages/src/pages/button/mod.rs

@@ -113,24 +113,46 @@ pub fn ButtonPage() -> impl IntoView {
 #[component]
 pub fn LoadingButton() -> impl IntoView {
     let loading = create_rw_signal(false);
+    let on_click = move |_| {
+        loading.set(true);
+        set_timeout(
+            move || {
+                loading.set(false);
+            },
+            std::time::Duration::new(2, 0),
+        );
+    };
     view! {
-        <h3>"loading"</h3>
+        <h3>"Loading"</h3>
         <Demo>
             <Space>
-                <Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined on:click=move |_| loading.set(true)>
+                <Button loading on_click icon=icondata::AiIcon::AiCloseOutlined>
-                    "ERROR Color Icon"
+                    "Click Me"
                 </Button>
-                <Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
+                <Button loading on_click>
+                    "Click Me"
                 </Button>
             </Space>
             <DemoCode slot html=highlight_str!(r#"
                 let loading = create_rw_signal(false);
+                let on_click = move |_| {
+                    loading.set(true);
+                    set_timeout(
+                        move || {
+                            loading.set(false);
+                        },
+                        std::time::Duration::new(2, 0),
+                    );
+                };
                 view! {
-                    <Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
+                    <Space>
-                        "ERROR Color Icon"
+                        <Button loading on_click icon=icondata::AiIcon::AiCloseOutlined>
-                    </Button>
+                            "Click Me"
-                    <Button loading color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
+                        </Button>
-                    </Button>
+                        <Button loading on_click>
+                            "Click Me"
+                        </Button>
+                    </Space>
                 }
             "#, "rust")>
                 ""

src/button/button.css

@@ -5,7 +5,6 @@
     color: var(--font-color);
     border: 1px solid var(--border-color);
     border-radius: 5px;
-    cursor: pointer;
 
     display: inline-flex;
     align-items: center;
@@ -14,12 +13,14 @@
 }
 
 .melt-button:hover {
-    transition: all 0.3s;
     border-color: var(--border-color-hover);
     background-color: var(--background-color-hover);
+    cursor: pointer;
+
+    transition: all 0.3s;
 }
 
-.melt-button:active {
+.melt-button:active:not(.melt-button--disabled) {
     transition: all 0.3s;
     border-color: var(--border-color-hover);
     background-color: var(--background-color-active);

src/button/mod.rs

@@ -58,6 +58,8 @@ pub fn Button(
     #[prop(optional, into)] round: MaybeSignal<bool>,
     #[prop(optional, into)] icon: Option<Icon>,
     #[prop(optional, into)] loading: MaybeSignal<bool>,
+    #[prop(optional, into)] disabled: MaybeSignal<bool>,
+    #[prop(optional, into)] on_click: Option<Callback<ev::MouseEvent>>,
     #[prop(optional)] children: Option<ChildrenFn>,
 ) -> impl IntoView {
     let theme = use_theme(Theme::light);
@@ -90,13 +92,33 @@ pub fn Button(
         ""
     };
 
+    let disabled = create_memo(move |_| {
+        if loading.get() {
+            return true;
+        }
+
+        disabled.get()
+    });
+
+    let on_click = move |event| {
+        if disabled.get() {
+            return;
+        }
+        let Some(callback) = on_click.as_ref() else {
+            return;
+        };
+        callback.call(event);
+    };
+
     view! {class=class_name,
         <button
             class:melt-button=true
             class=("melt-button--text", move || type_.get() == ButtonType::TEXT)
             class=("melt-button--link", move || type_.get() == ButtonType::LINK)
             class=("melt-button--round", move || round.get())
+            class=("melt-button--disabled", move || disabled.get())
             style=move || format!("{}{}", css_vars.get(), style.get())
+            on:click=on_click
             >
                 {
                     move || {