diff --git a/crate/src/components/button.rs b/crate/src/components/button.rs
index e2a1e3b..747df2f 100644
--- a/crate/src/components/button.rs
+++ b/crate/src/components/button.rs
@@ -11,6 +11,13 @@ pub enum ButtonType {
     Standard,
 }
 
+#[derive(Clone, PartialEq)]
+pub enum ButtonStyle {
+    Regular,
+    Light,
+    Outline,
+}
+
 #[derive(Clone, PartialEq)]
 pub enum Size {
     Small,
@@ -26,6 +33,7 @@ pub struct Button {
 pub struct ButtonProps {
     button_type: String,
     size: String,
+    button_style: String,
     class_name: String,
     onsignal: Callback<()>,
     children: Children,
@@ -36,6 +44,7 @@ impl From<Props> for ButtonProps {
         ButtonProps {
             button_type: get_button_type(props.button_type),
             size: get_size(props.size),
+            button_style: get_button_style(props.button_style),
             class_name: props.class_name,
             onsignal: props.onsignal,
             children: props.children,
@@ -48,6 +57,7 @@ pub struct Props {
     pub button_type: ButtonType,
     pub class_name: String,
     pub size: Size,
+    pub button_style: ButtonStyle,
     #[props(required)]
     pub onsignal: Callback<()>,
     pub children: Children,
@@ -77,6 +87,14 @@ pub fn get_size(size: Size) -> String {
     }
 }
 
+pub fn get_button_style(button_style: ButtonStyle) -> String {
+    match button_style {
+        ButtonStyle::Regular => String::from("regular"),
+        ButtonStyle::Light => String::from("light"),
+        ButtonStyle::Outline => String::from("outline"),
+    }
+}
+
 impl Default for Size {
     fn default() -> Self {
         Size::Medium
@@ -89,6 +107,12 @@ impl Default for ButtonType {
     }
 }
 
+impl Default for ButtonStyle {
+    fn default() -> Self {
+        ButtonStyle::Regular
+    }
+}
+
 impl Component for Button {
     type Message = Msg;
     type Properties = Props;
@@ -114,6 +138,7 @@ impl Component for Button {
         self.props.button_type = get_button_type(props.button_type);
         self.props.class_name = props.class_name;
         self.props.size = get_size(props.size);
+        self.props.button_style = get_button_style(props.button_style);
         self.props.onsignal = props.onsignal;
         self.props.children = props.children;
         true
@@ -123,7 +148,11 @@ impl Component for Button {
         html! {
             <button
                 onclick=self.link.callback(|_| Msg::Clicked)
-                class=format!("button {} {} {}", self.props.button_type.clone(), self.props.size.clone(), self.props.class_name.clone())
+                class=format!("button {} {} {} {}",
+                    self.props.button_type.clone(),
+                    self.props.size.clone(),
+                    self.props.button_style.clone(),
+                    self.props.class_name.clone())
             > { self.props.children.render() }
             </button>
         }