Added ghost button

stories/Button.stories.js

@@ -23,6 +23,7 @@ export default {
         "dark",
         "inverse",
         "ghost",
+        "ghost-inverse",
         "danger",
         "danger-inverse",
       ],
@@ -81,6 +82,9 @@ export const Variants = {
         <Button {..._args} variant="ghost">
           Ghost
         </Button>
+        <Button {..._args} variant="ghost-inverse">
+          Ghost Inverse
+        </Button>
         <Button {..._args} variant="danger">
           Danger
         </Button>
@@ -300,6 +304,27 @@ export const AllVariants = {
         </div>
       </div>
 
+      <div>
+        <h3 className="text-white font-semibold mb-3">Ghost Inverse Variant</h3>
+        <div className="space-x-4">
+          <Button variant="ghost-inverse" size="xsmall">
+            XSmall
+          </Button>
+          <Button variant="ghost-inverse" size="small">
+            Small
+          </Button>
+          <Button variant="ghost-inverse" size="medium">
+            Medium
+          </Button>
+          <Button variant="ghost-inverse" size="large">
+            Large
+          </Button>
+          <Button variant="ghost-inverse" size="xlarge">
+            XLarge
+          </Button>
+        </div>
+      </div>
+
       <div>
         <h3 className="text-white font-semibold mb-3">Danger Variant</h3>
         <div className="space-x-4">
@@ -366,6 +391,9 @@ export const AllVariants = {
           <Button variant="ghost" size="large" disabled>
             Ghost Disabled
           </Button>
+          <Button variant="ghost-inverse" size="large" disabled>
+            Ghost Inverse Disabled
+          </Button>
           <Button variant="danger" size="large" disabled>
             Danger Disabled
           </Button>