diff --git a/app/View/Components/Button.php b/app/View/Components/Button.php
new file mode 100644
index 0000000..ba68d1d
--- /dev/null
+++ b/app/View/Components/Button.php
@@ -0,0 +1,58 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Button extends Component
+{
+
+    public function __construct(public string $variant = 'primary', public bool $disabled = false)
+    {
+        //
+    }
+
+    public function classes(): string
+    {
+        $base = 'inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium transition ' .
+            'duration-150 ease-in-out';
+
+        $classes = match ($this->variant) {
+            'secondary' => [
+                'base' => 'bg-secondary text-text',
+                'hover' => 'hover:bg-secondary-dark',
+                'disabled' => 'disabled:bg-secondary',
+            ],
+            'outline' => [
+                'base' => 'bg-outline border border-primary text-primary',
+                'hover' => 'hover:bg-primary hover:text-text-inverted',
+                'disabled' => 'disabled:bg-outline disabled:text-primary',
+            ],
+            default => [
+                'base' => 'bg-primary text-text-inverted',
+                'hover' => 'hover:bg-primary-dark',
+                'disabled' => 'disabled:bg-primary'
+            ]
+        };
+
+        $baseDisabled = 'disabled:cursor-not-allowed disabled:opacity-60';
+
+        return trim(
+            $base . ' ' .
+            $classes['base'] . ' ' .
+            $classes['hover'] . ' ' .
+            $baseDisabled . ' ' .
+            $classes['disabled']
+        );
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.button');
+    }
+}
diff --git a/resources/views/components/button.blade.php b/resources/views/components/button.blade.php
new file mode 100644
index 0000000..4e20927
--- /dev/null
+++ b/resources/views/components/button.blade.php
@@ -0,0 +1,8 @@
+<button 
+    {{ $attributes
+        ->merge(['class' => $classes()])
+        ->merge(['disabled' => $disabled])
+    }}
+>
+    {{ $slot }}
+</button>
diff --git a/resources/views/storybook/index.blade.php b/resources/views/storybook/index.blade.php
index 59b0a40..b3fa365 100644
--- a/resources/views/storybook/index.blade.php
+++ b/resources/views/storybook/index.blade.php
@@ -27,33 +27,29 @@
             <h3 class="text-l font-semibold">Enabled</h3>
 
             <div class="flex gap-4">
-                <button class="bg-primary text-text-inverted px-4 py-2 rounded">
-                    Primary
-                </button>
+                <x-button>Default</x-button>
 
-                <button class="bg-secondary text-black px-4 py-2 rounded">
-                    Secondary
-                </button>
+                <x-button variant="primary">Primary</x-button>
 
-                <button class="border border-primary text-primary px-4 py-2 rounded">
-                    Outline
-                </button>
+
+                <x-button variant="secondary">Secondary</x-button>
+
+
+                <x-button variant="outline">Outline</x-button>
             </div>
 
             <h3 class="text-l font-semibold">Disabled</h3>
 
             <div class="flex gap-4">
-                <button class="bg-primary text-text-inverted px-4 py-2 rounded" disabled>
-                    Primary
-                </button>
+                <x-button disabled>Default</x-button>
 
-                <button class="bg-secondary text-black px-4 py-2 rounded" disabled>
-                    Secondary
-                </button>
+                <x-button variant="primary" disabled>Primary</x-button>
 
-                <button class="border border-primary text-primary px-4 py-2 rounded" disabled>
-                    Outline
-                </button>
+
+                <x-button variant="secondary" disabled>Secondary</x-button>
+
+
+                <x-button variant="outline" disabled>Outline</x-button>
             </div>
         </section>