From a910d41e6e63d08cdd87d9897d16abd73844702b Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 22 Apr 2026 10:07:07 -0400
Subject: [PATCH] feat(buttons): add ghost and outline button components with
 responsive styles

---
 .../views/components/button/ghost.blade.php        |  4 ++++
 .../views/components/button/icon.blade.php         |  6 ++++++
 .../views/components/button/outline.blade.php      | 14 ++++++++++++++
 3 files changed, 24 insertions(+)
 create mode 100644 themes/lucentui/views/components/button/ghost.blade.php
 create mode 100644 themes/lucentui/views/components/button/icon.blade.php
 create mode 100644 themes/lucentui/views/components/button/outline.blade.php

diff --git a/themes/lucentui/views/components/button/ghost.blade.php b/themes/lucentui/views/components/button/ghost.blade.php
new file mode 100644
index 000000000..a7b297db2
--- /dev/null
+++ b/themes/lucentui/views/components/button/ghost.blade.php
@@ -0,0 +1,4 @@
+<button
+    {{ $attributes->merge(['class' => 'flex items-center gap-2 justify-center bg-transparent text-base text-sm font-medium hover:bg-background-secondary/60 hover:text-primary active:scale-95 py-2.5 lg:py-2 px-4.5 rounded-md duration-200 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-0 transition-all']) }}>
+    {{ $slot }}
+</button>
diff --git a/themes/lucentui/views/components/button/icon.blade.php b/themes/lucentui/views/components/button/icon.blade.php
new file mode 100644
index 000000000..183bec73e
--- /dev/null
+++ b/themes/lucentui/views/components/button/icon.blade.php
@@ -0,0 +1,6 @@
+@props(['label' => null])
+<button type="button"
+    @if($label) aria-label="{{ $label }}" title="{{ $label }}" @endif
+    {{ $attributes->merge(['class' => 'inline-flex items-center justify-center w-10 h-10 rounded-lg text-base hover:bg-background-secondary/70 hover:text-primary active:scale-95 duration-200 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-primary/40 transition-all']) }}>
+    {{ $slot }}
+</button>
diff --git a/themes/lucentui/views/components/button/outline.blade.php b/themes/lucentui/views/components/button/outline.blade.php
new file mode 100644
index 000000000..366fa06ac
--- /dev/null
+++ b/themes/lucentui/views/components/button/outline.blade.php
@@ -0,0 +1,14 @@
+<button
+    {{ $attributes->merge(['class' => 'flex items-center gap-2 justify-center bg-transparent text-base text-sm font-semibold border border-neutral/70 hover:border-primary/60 hover:text-primary hover:glow-primary-sm active:scale-95 py-2.5 lg:py-2 px-4.5 rounded-md w-full duration-300 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-primary/40 focus:ring-offset-2 focus:ring-offset-background transition-all']) }}>
+    @if (isset($type) && $type === 'submit')
+        <div role="status" wire:loading>
+            <x-ri-loader-5-fill aria-hidden="true" class="size-5 animate-spin" />
+            <span class="sr-only">Loading...</span>
+        </div>
+        <div wire:loading.remove>
+            {{ $slot }}
+        </div>
+    @else
+        {{ $slot }}
+    @endif
+</button>