Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(buttons): add ghost and outline button components with responsive styles

Browse Source
This commit is contained in:
Joseph.Rawlings
2026-04-22 10:07:07 -04:00
parent 9c0a1e4157
commit a910d41e6e
3 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
themes/lucentui/views/components/button/ghost.blade.php Normal file
View File

@@ -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>

6
themes/lucentui/views/components/button/icon.blade.php Normal file
View File

@@ -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>

14
themes/lucentui/views/components/button/outline.blade.php Normal file
View File

@@ -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>