diff --git a/examples/basic/Trunk.toml b/examples/basic/Trunk.toml
index b3cb014..7cf59cc 100644
--- a/examples/basic/Trunk.toml
+++ b/examples/basic/Trunk.toml
@@ -3,7 +3,8 @@ target = "index.html"
 
 [watch]
 watch = [
-    "../../src"
+    "../../src",
+    "./src"
 ]
 
 [serve]
diff --git a/examples/basic/src/demo_button.rs b/examples/basic/src/demo_button.rs
new file mode 100644
index 0000000..c69c16a
--- /dev/null
+++ b/examples/basic/src/demo_button.rs
@@ -0,0 +1,31 @@
+use leptos::*;
+use melt_ui::*;
+
+#[component]
+pub fn DemoButton(cx: Scope) -> impl IntoView {
+    view! {cx,
+        <Space>
+            <Button type_=ButtonType::PRIMARY>
+                "PRIMARY"
+            </Button>
+            <Button type_=ButtonType::SOLID>
+                "SOLID"
+            </Button>
+            <Button type_=ButtonType::TEXT>
+                "TEXT"
+            </Button>
+            <Button color=ButtonColor::PRIMARY>
+                "PRIMARY Color"
+            </Button>
+            <Button color=ButtonColor::SUCCESS>
+                "SUCCESS Color"
+            </Button>
+            <Button color=ButtonColor::WARNING>
+                "WARNING Color"
+            </Button>
+            <Button color=ButtonColor::ERROR>
+                "ERROR Color"
+            </Button>
+        </Space>
+    }
+}
\ No newline at end of file
diff --git a/examples/basic/src/main.rs b/examples/basic/src/main.rs
index 3825299..ebdf6f7 100644
--- a/examples/basic/src/main.rs
+++ b/examples/basic/src/main.rs
@@ -1,19 +1,17 @@
 use leptos::*;
 use melt_ui::*;
+mod demo_button;
 mod demo_modal;
+pub use demo_button::*;
 pub use demo_modal::*;
 
-fn main() {
-    mount_to_body(|cx| view! { cx, <App/> })
-}
-
 #[component]
 pub fn App(cx: Scope) -> impl IntoView {
     let (theme, set_theme) = create_signal(cx, Theme::light());
     provide_context(cx, theme);
     let (count, set_count) = create_signal(cx, 0.0);
     let (button_type, set_button_type) = create_signal(cx, ButtonType::TEXT);
-    
+
     let count_string = create_memo(cx, move |_| {
         log!("sd");
         count.get().to_string()
@@ -40,9 +38,16 @@ pub fn App(cx: Scope) -> impl IntoView {
                 "click"
             </Button>
             {move || count.get()}
-            <DemoModal/>
+
             <Progress percentage=count/>
         </Space>
+        <hr />
+        <DemoButton />
+        <hr />
+        <DemoModal/>
     }
 }
 
+fn main() {
+    mount_to_body(|cx| view! { cx, <App/> })
+}
diff --git a/src/button/button.css b/src/button/button.css
index a4e1327..be9dee3 100644
--- a/src/button/button.css
+++ b/src/button/button.css
@@ -1,15 +1,16 @@
 .melt-button {
     height: 34px;
     padding: 0 16px;
-    background-color: #0000;
-    border: 1px solid #555a;
+    background-color: var(--background-color);
+    color: var(--font-color);
+    border: 1px solid var(--border-color);
     border-radius: 5px;
     cursor: pointer;
 }
 
 .melt-button:hover {
     transition: all 0.3s;
-    border-color: #555;
+    border-color: var(--border-color-hover);
 }
 
 .melt-button--text {
@@ -17,5 +18,5 @@
 }
 
 .melt-button--text:hover {
-    color: #4af;
+    color: var(--font-color-hover);
 }
\ No newline at end of file
diff --git a/src/button/mod.rs b/src/button/mod.rs
index ec4f3cb..e954182 100644
--- a/src/button/mod.rs
+++ b/src/button/mod.rs
@@ -18,7 +18,7 @@ pub enum ButtonColor {
     PRIMARY,
     SUCCESS,
     WARNING,
-    Error,
+    ERROR,
 }
 
 impl ButtonColor {
@@ -27,7 +27,7 @@ impl ButtonColor {
             ButtonColor::PRIMARY => theme.common.color_primary.clone(),
             ButtonColor::SUCCESS => theme.common.color_success.clone(),
             ButtonColor::WARNING => theme.common.color_warning.clone(),
-            ButtonColor::Error => theme.common.color_error.clone(),
+            ButtonColor::ERROR => theme.common.color_error.clone(),
         }
     }
 }
@@ -40,19 +40,33 @@ pub fn Button(
     children: Children,
 ) -> impl IntoView {
     let theme = use_theme(cx, Theme::light);
-    let css_vars = create_memo(cx, move |_| {
-        let mut css_vars = String::new();
-        let theme = theme.get();
-        let bg_color = color.get().theme_color(&theme);
-        css_vars.push_str(&format!("--background-color: {bg_color}"));
-        css_vars
-    });
+    let css_vars;
+    {
+        let type_ = type_.clone().get();
+        css_vars = create_memo(cx, move |_| {
+            let mut css_vars = String::new();
+            let theme = theme.get();
+            let bg_color = color.get().theme_color(&theme);
+            if type_ == ButtonType::PRIMARY {
+                css_vars.push_str(&format!("--background-color: {bg_color};"));
+                css_vars.push_str(&format!("--font-color: #fff;"));
+                css_vars.push_str(&format!("--border-color: {bg_color};"));
+                css_vars.push_str(&format!("--border-color-hover: {bg_color};"));
+            } else {
+                css_vars.push_str(&format!("--font-color-hover: {bg_color};"));
+                css_vars.push_str(&format!("--border-color: #555a;"));
+                css_vars.push_str(&format!("--border-color-hover: #555;"));
+            }
+
+            css_vars
+        });
+    }
     let class_name = mount_style("button", || style_sheet_str!("./src/button/button.css"));
 
     view! {cx, class=class_name,
-        <button 
-            class:melt-button=true 
-            class=("melt-button--text", move || type_.get() == ButtonType::TEXT) 
+        <button
+            class:melt-button=true
+            class=("melt-button--text", move || type_.get() == ButtonType::TEXT)
             style=move || css_vars.get()
             >
             {children(cx)}