diff --git a/src/lib/components/Button/Button.svelte b/src/lib/components/Button/Button.svelte
index 7a08dd6e..7f135893 100644
--- a/src/lib/components/Button/Button.svelte
+++ b/src/lib/components/Button/Button.svelte
@@ -7,9 +7,10 @@
         'green' |
         'red' |
         'blue' |
-        'orange' = 'accent';
+        'orange' |
+        'input' = 'accent';
     export let block : boolean = false;
-    export let variant : 'fill' | 'outline' | 'invisible' | 'outline-fill' = 'fill';
+    export let variant : 'fill' | 'fill-light' | 'outline' | 'invisible' | 'outline-fill' = 'fill';
     export let align: 'start' | 'center' = 'center';
 
     export let button = {} as HTMLButtonElement | HTMLAnchorElement;
@@ -164,14 +165,6 @@
         }
     }
 
-    /* styles */
-    /* .button.accent {
-        background-color: var(--accent);
-        color: var(--accent-text);
-        transition: .2s box-shadow;
-        --local-hover-shadow-color: var(--accent-light);
-    } */
-
     .button {
         &.fill {
             &.accent {
@@ -181,6 +174,57 @@
                 --local-hover-shadow-color: var(--accent-light);
             }
 
+            &.gray {
+                background-color: var(--gray-dark);
+                color: var(--text-white);
+                transition: .2s box-shadow;
+                --local-hover-shadow-color: var(--gray-light);
+            }
+
+            &.green {
+                background-color: var(--green-dark);
+                color: var(--text-white);
+                transition: .2s box-shadow;
+                --local-hover-shadow-color: var(--green-light);
+            }
+
+            &.red {
+                background-color: var(--red-dark);
+                color: var(--text-white);
+                transition: .2s box-shadow;
+                --local-hover-shadow-color: var(--red-light);
+            }
+
+            &.blue {
+                background-color: var(--blue-dark);
+                color: var(--text-white);
+                transition: .2s box-shadow;
+                --local-hover-shadow-color: var(--blue-light);
+            }
+
+            &.orange {
+                background-color: var(--orange-dark);
+                color: var(--text-white);
+                transition: .2s box-shadow;
+                --local-hover-shadow-color: var(--orange-light);
+            }
+
+            &.input {
+                background-color: var(--input);
+                color: var(--text);
+                transition: .2s box-shadow;
+                --local-hover-shadow-color: var(--input-hover);
+            }
+        }
+
+        &.fill-light {
+            &.accent {
+                background-color: var(--accent-light);
+                color: var(--accent);
+                transition: .2s box-shadow;
+                --local-hover-shadow-color: var(--accent-lightest);
+            }
+
             &.gray {
                 background-color: var(--gray-light);
                 color: var(--gray-dark);
@@ -319,6 +363,7 @@
                 transition: .2s box-shadow;
                 --local-hover-shadow-color: var(--orange-light);
             }
+
         }
 
         &.invisible {
@@ -374,22 +419,17 @@
                     color: var(--orange-dark);
                 }
             }
+
+            &.input {
+                &:hover {
+                    background-color: var(--input);
+                    box-shadow: none!important;
+                    color: var(--text);
+                }
+            }
         }
     }
 
-    .button.soft {
-        background-color: var(--accent-light);
-        color: var(--accent);
-        transition: .2s box-shadow;
-        --local-hover-shadow-color: #eee;
-    }
-    
-    .button.light {
-        background-color: #f5f5f5;
-        color: var(--text);
-        transition: .2s box-shadow;
-        --local-hover-shadow-color: var(--accent-light);
-    }
     :global(:root.dark) .button.light {
         background-color: #2e2e2e;
     }
@@ -404,13 +444,6 @@
         }
     }
 
-    .button.danger {
-        background-color: var(--red-dark);
-        color: var(--text-white);
-        transition: .2s box-shadow;
-        --local-hover-shadow-color: var(--red-light);
-    }
-
     /*Styles for button disabled state*/
     .button[disabled] {
         cursor: not-allowed;
diff --git a/src/routes/[[slug]]/docs/Button.svelte b/src/routes/[[slug]]/docs/Button.svelte
index 4b7ba722..0db9fedd 100644
--- a/src/routes/[[slug]]/docs/Button.svelte
+++ b/src/routes/[[slug]]/docs/Button.svelte
@@ -128,81 +128,105 @@ All other properties will be forwarded to the underlying element.
 <h4>Fill</h4>
 
 <CodeBlock code={`
-    <Button color="accent" variant="fill">Fill Button</Button>
-    <Button color="gray" variant="fill">Fill Button</Button>
-    <Button color="green" variant="fill">Fill Button</Button>
-    <Button color="red" variant="fill">Fill Button</Button>
-    <Button color="blue" variant="fill">Fill Button</Button>
-    <Button color="orange" variant="fill">Fill Button</Button>
+    <Button color="accent" variant="fill">Fill Accent</Button>
+    <Button color="gray" variant="fill">Fill Gray</Button>
+    <Button color="green" variant="fill">Fill Green</Button>
+    <Button color="red" variant="fill">Fill Red</Button>
+    <Button color="blue" variant="fill">Fill Blue</Button>
+    <Button color="orange" variant="fill">Fill Orange</Button>
+    <Button color="input" variant="fill">Fill Button</Button>
 `} />
 
 <CodeResult style="display:flex;flex-direction:column;gap:15px;align-items:flex-start" white>
-    <Button color="accent" variant="fill">Fill Button</Button>
-    <Button color="gray" variant="fill">Fill Button</Button>
-    <Button color="green" variant="fill">Fill Button</Button>
-    <Button color="red" variant="fill">Fill Button</Button>
-    <Button color="blue" variant="fill">Fill Button</Button>
-    <Button color="orange" variant="fill">Fill Button</Button>
+    <Button color="accent" variant="fill">Fill Accent</Button>
+    <Button color="gray" variant="fill">Fill Gray</Button>
+    <Button color="green" variant="fill">Fill Green</Button>
+    <Button color="red" variant="fill">Fill Red</Button>
+    <Button color="blue" variant="fill">Fill Blue</Button>
+    <Button color="orange" variant="fill">Fill Orange</Button>
+    <Button color="input" variant="fill">Fill Input</Button>
+</CodeResult>
+
+<h4>Fill-Light</h4>
+
+<CodeBlock code={`
+    <Button color="accent" variant="fill-light">Fill Accent</Button>
+    <Button color="gray" variant="fill-light">Fill Gray</Button>
+    <Button color="green" variant="fil-light">Fill Green</Button>
+    <Button color="red" variant="fill-light">Fill Red</Button>
+    <Button color="blue" variant="fill-light">Fill Blue</Button>
+    <Button color="orange" variant="fill-light">Fill Orange</Button>
+`} />
+
+<CodeResult style="display:flex;flex-direction:column;gap:15px;align-items:flex-start" white>
+    <Button color="accent" variant="fill-light">Fill Accent</Button>
+    <Button color="gray" variant="fill-light">Fill Gray</Button>
+    <Button color="green" variant="fill-light">Fill Green</Button>
+    <Button color="red" variant="fill-light">Fill Red</Button>
+    <Button color="blue" variant="fill-light">Fill Blue</Button>
+    <Button color="orange" variant="fill-light">Fill Orange</Button>
 </CodeResult>
 
 <h4>Outline</h4>
 
 <CodeBlock code={`
-    <Button color="accent" variant="outline">Outline Button</Button>
-    <Button color="gray" variant="outline">Outline Button</Button>
-    <Button color="green" variant="outline">Outline Button</Button>
-    <Button color="red" variant="outline">Outline Button</Button>
-    <Button color="blue" variant="outline">Outline Button</Button>
-    <Button color="orange" variant="outline">Outline Button</Button>
+    <Button color="accent" variant="outline">Outline Accent</Button>
+    <Button color="gray" variant="outline">Outline Gray</Button>
+    <Button color="green" variant="outline">Outline Green</Button>
+    <Button color="red" variant="outline">Outline Red</Button>
+    <Button color="blue" variant="outline">Outline Blue</Button>
+    <Button color="orange" variant="outline">Outline Orange</Button>
 `} />
 
 <CodeResult style="display:flex;flex-direction:column;gap:15px;align-items:flex-start" white>
-    <Button color="accent" variant="outline">Outline Button</Button>
-    <Button color="gray" variant="outline">Outline Button</Button>
-    <Button color="green" variant="outline">Outline Button</Button>
-    <Button color="red" variant="outline">Outline Button</Button>
-    <Button color="blue" variant="outline">Outline Button</Button>
-    <Button color="orange" variant="outline">Outline Button</Button>
+    <Button color="accent" variant="outline">Outline Accent</Button>
+    <Button color="gray" variant="outline">Outline Gray</Button>
+    <Button color="green" variant="outline">Outline Green</Button>
+    <Button color="red" variant="outline">Outline Red</Button>
+    <Button color="blue" variant="outline">Outline Blue</Button>
+    <Button color="orange" variant="outline">Outline Orange</Button>
 </CodeResult>
 
 <h4>Outline Fill</h4>
 
 <CodeBlock code={`
-    <Button color="accent" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="gray" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="green" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="red" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="blue" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="orange" variant="outline-fill">Outline-fill Button</Button>
+    <Button color="accent" variant="outline-fill">Outline-fill Accent</Button>
+    <Button color="gray" variant="outline-fill">Outline-fill Gray</Button>
+    <Button color="green" variant="outline-fill">Outline-fill Green</Button>
+    <Button color="red" variant="outline-fill">Outline-fill Red</Button>
+    <Button color="blue" variant="outline-fill">Outline-fill Blue</Button>
+    <Button color="orange" variant="outline-fill">Outline-fill Orange</Button>
 `} />
 
 <CodeResult style="display:flex;flex-direction:column;gap:15px;align-items:flex-start" white>
-    <Button color="accent" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="gray" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="green" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="red" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="blue" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="orange" variant="outline-fill">Outline-fill Button</Button>
+    <Button color="accent" variant="outline-fill">Outline-fill Accent</Button>
+    <Button color="gray" variant="outline-fill">Outline-fill Gray</Button>
+    <Button color="green" variant="outline-fill">Outline-fill Green</Button>
+    <Button color="red" variant="outline-fill">Outline-fill Red</Button>
+    <Button color="blue" variant="outline-fill">Outline-fill Blue</Button>
+    <Button color="orange" variant="outline-fill">Outline-fill Orange</Button>
 </CodeResult>
 
 <h4>Invisible</h4>
 
 <CodeBlock code={`
-    <Button color="accent" variant="invisible">Invisible Button</Button>
-    <Button color="gray" variant="invisible">Invisible Button</Button>
-    <Button color="green" variant="invisible">Invisible Button</Button>
-    <Button color="red" variant="invisible">Invisible Button</Button>
-    <Button color="blue" variant="invisible">Invisible Button</Button>
-    <Button color="orange" variant="invisible">Invisible Button</Button>
+    <Button color="accent" variant="invisible">Invisible Accent</Button>
+    <Button color="gray" variant="invisible">Invisible Gray</Button>
+    <Button color="green" variant="invisible">Invisible Green</Button>
+    <Button color="red" variant="invisible">Invisible Red</Button>
+    <Button color="blue" variant="invisible">Invisible Blue</Button>
+    <Button color="orange" variant="invisible">Invisible Orange</Button>
+    <Button color="input" variant="invisible">Invisible Input</Button>
 `} />   
 
 <CodeResult style="display:flex;flex-direction:column;gap:15px;align-items:flex-start" white>
-    <Button color="accent" variant="invisible">Invisible Button</Button>
-    <Button color="gray" variant="invisible">Invisible Button</Button>
-    <Button color="green" variant="invisible">Invisible Button</Button>
-    <Button color="red" variant="invisible">Invisible Button</Button>
-    <Button color="blue" variant="invisible">Invisible Button</Button>
-    <Button color="orange" variant="invisible">Invisible Button</Button>
+    <Button color="accent" variant="invisible">Invisible Accent</Button>
+    <Button color="gray" variant="invisible">Invisible Gray</Button>
+    <Button color="green" variant="invisible">Invisible Green</Button>
+    <Button color="red" variant="invisible">Invisible Red</Button>
+    <Button color="blue" variant="invisible">Invisible Blue</Button>
+    <Button color="orange" variant="invisible">Invisible Orange</Button>
+    <Button color="input" variant="invisible">Invisible Input</Button>
 </CodeResult>
 
 <h2 id="slots">Slots</h2>