✨ feat: button style

examples/basic/src/app.rs

@@ -40,6 +40,9 @@ pub fn App(cx: Scope) -> impl IntoView {
                     <Route path="/modal" view=move |cx| view! {cx,
                         <ModalPage />
                     } />
+                    <Route path="/button" view=move |cx| view! {cx,
+                        <ButtonPage />
+                    } />
                 </Route>
             </Routes>
             <Routes base="/mobile".to_string()>

examples/basic/src/main.rs

@@ -1,5 +1,4 @@
 mod app;
-mod demo_button;
 mod demo_checkbox;
 mod demo_slider;
 mod pages;

examples/basic/src/pages/button/mod.rs

@@ -2,7 +2,7 @@ use leptos::*;
 use melt_ui::*;
 
 #[component]
-pub fn DemoButton(cx: Scope) -> impl IntoView {
+pub fn ButtonPage(cx: Scope) -> impl IntoView {
     view! {cx,
         <Space>
             <Button type_=ButtonType::PRIMARY>
@@ -35,5 +35,9 @@ pub fn DemoButton(cx: Scope) -> impl IntoView {
             <Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined round=true>
             </Button>
         </Space>
+        <div style="padding-top: 12px">
+            <Button style="background: blue;">"style blue"</Button>
+            <Button style="width: 40px; height: 20px">"size"</Button>
+        </div>
     }
 }

examples/basic/src/pages/components.rs

@@ -40,6 +40,7 @@ pub fn ComponentsPage(cx: Scope) -> impl IntoView {
                     <MenuItem key="image" label="image" />
                     <MenuItem key="modal" label="madal" />
                     <MenuItem key="nav-bar" label="nav-bar" />
+                    <MenuItem key="button" label="button" />
                 </Menu>
             </aside>
             <main>

examples/basic/src/pages/home.rs

@@ -1,4 +1,3 @@
-use crate::demo_button::*;
 use crate::demo_checkbox::*;
 use crate::demo_slider::*;
 use leptos::*;
@@ -40,8 +39,6 @@ pub fn Home(cx: Scope) -> impl IntoView {
             <Progress percentage=count/>
         </Space>
         <hr />
-        <DemoButton />
-        <hr />
         <DemoCheckout />
         <hr />
         <DemoSlider />

examples/basic/src/pages/mod.rs

@@ -1,3 +1,4 @@
+mod button;
 mod components;
 mod home;
 mod image;
@@ -9,6 +10,7 @@ mod nav_bar;
 mod slider;
 mod tabbar;
 
+pub use button::*;
 pub use components::*;
 pub use home::*;
 pub use image::*;

src/button/mod.rs

@@ -37,6 +37,7 @@ impl ButtonColor {
 #[component]
 pub fn Button(
     cx: Scope,
+    #[prop(optional, into)] style: MaybeSignal<String>,
     #[prop(optional, into)] type_: MaybeSignal<ButtonType>,
     #[prop(optional, into)] color: MaybeSignal<ButtonColor>,
     #[prop(optional, into)] round: MaybeSignal<bool>,
@@ -75,7 +76,7 @@ pub fn Button(
             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())
-            style=move || css_vars.get()
+            style=move || format!("{}{}", css_vars.get(), style.get())
             >
                 <OptionComp value=icon view=move |cx, icon| {
                     view!{cx,