Use + icon buttons on mobile dashboards.

Sync mobile-header-btn partials, mobile x-btn.create, and update dashboard header actions for consistent mobile FABs.

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/views/components/btn/create.blade.php

@@ -1,17 +1,33 @@
 @props([
     'href' => null,
     'type' => 'button',
+    'label' => null,
 ])
 
 @php
     $tag = $href ? 'a' : 'button';
+    $ariaLabel = $label ?? trim(preg_replace('/\s+/', ' ', strip_tags((string) $slot)));
 @endphp
 
 <{{ $tag }}
     @if ($href) href="{{ $href }}" @endif
     @if ($tag === 'button') type="{{ $type }}" @endif
-    {{ $attributes->class(['btn-primary']) }}
+    aria-label="{{ $ariaLabel }}"
+    title="{{ $ariaLabel }}"
+    {{ $attributes->class(['btn-fab h-10 w-10 lg:hidden']) }}
 >
-    <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
+    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
+    </svg>
+</{{ $tag }}>
+
+<{{ $tag }}
+    @if ($href) href="{{ $href }}" @endif
+    @if ($tag === 'button') type="{{ $type }}" @endif
+    {{ $attributes->class(['btn-primary hidden lg:inline-flex']) }}
+>
+    <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
+    </svg>
     {{ $slot }}
 </{{ $tag }}>

resources/views/links/dashboard.blade.php

@@ -1,15 +1,16 @@
 <x-user-layout>
     <x-slot name="title">Dashboard</x-slot>
     <div class="mx-auto max-w-5xl space-y-6">
-        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div class="flex items-center justify-between gap-3">
-            <div>
+            <div class="min-w-0 flex-1">
-                <h1 class="text-2xl font-semibold text-slate-900">Overview</h1>
+                <h1 class="truncate text-lg font-semibold text-slate-900 lg:text-2xl">Overview</h1>
-                <p class="mt-1 text-sm text-slate-500">Short links on <span class="font-medium text-emerald-700">ladl.link</span> — billed from your Ladill wallet</p>
+                <p class="mt-1 hidden text-sm text-slate-500 sm:block">Short links on <span class="font-medium text-emerald-700">ladl.link</span> — billed from your Ladill wallet</p>
             </div>
-            <a href="{{ route('user.links.create') }}"
+            @include('partials.mobile-header-btn', [
-               class="btn-primary inline-flex items-center justify-center">
+                'href' => route('user.links.create'),
-                Create link
+                'label' => 'Create link',
-            </a>
+                'variant' => 'primary',
+            ])
         </div>
 
         <div class="grid gap-4 sm:grid-cols-3">

resources/views/partials/mobile-header-btn.blade.php

@@ -0,0 +1,53 @@
+@php
+    $variant = $variant ?? 'primary';
+    $type = $type ?? 'submit';
+    $tag = ! empty($href) ? 'a' : 'button';
+    $ariaLabel = $ariaLabel ?? $label ?? '';
+    $desktopLabel = $desktopLabel ?? $label ?? '';
+    $showDesktopIcon = $showDesktopIcon ?? ($variant === 'primary');
+
+    $mobileClass = match ($variant) {
+        'primary' => 'btn-fab h-10 w-10 lg:hidden',
+        'outline' => 'inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 shadow-sm transition hover:border-slate-300 hover:bg-slate-50 lg:hidden',
+        'dark' => 'inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-900 text-white shadow-sm transition hover:bg-gray-800 lg:hidden',
+        'indigo' => 'inline-flex h-10 w-10 items-center justify-center rounded-full bg-indigo-600 text-white shadow-sm transition hover:bg-indigo-700 lg:hidden',
+        default => 'btn-fab h-10 w-10 lg:hidden',
+    };
+
+    $desktopClass = match ($variant) {
+        'primary' => 'btn-primary hidden items-center lg:inline-flex',
+        'outline' => 'hidden items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition hover:bg-gray-50 lg:inline-flex',
+        'dark' => 'hidden items-center gap-1.5 rounded-lg bg-gray-900 px-3.5 py-2 text-sm font-medium text-white transition hover:bg-gray-800 lg:inline-flex',
+        'indigo' => 'hidden items-center justify-center rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-indigo-700 lg:inline-flex',
+        default => 'btn-primary hidden items-center lg:inline-flex',
+    };
+
+    $extraClass = $class ?? '';
+@endphp
+
+<{{ $tag }}
+    @if ($tag === 'a') href="{{ $href }}" @endif
+    @if ($tag === 'button') type="{{ $type }}" @endif
+    aria-label="{{ $ariaLabel }}"
+    title="{{ $ariaLabel }}"
+    @if (! empty($attributes)) {!! $attributes !!} @endif
+    class="{{ trim($mobileClass.' '.$extraClass) }}"
+>
+    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
+    </svg>
+</{{ $tag }}>
+
+<{{ $tag }}
+    @if ($tag === 'a') href="{{ $href }}" @endif
+    @if ($tag === 'button') type="{{ $type }}" @endif
+    @if (! empty($attributes)) {!! $attributes !!} @endif
+    class="{{ trim($desktopClass.' '.$extraClass) }}"
+>
+    @if ($showDesktopIcon)
+        <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
+        </svg>
+    @endif
+    {{ $desktopLabel }}
+</{{ $tag }}>

resources/views/partials/mobile-icon-link.blade.php

@@ -0,0 +1,27 @@
+@php
+    $icon = $icon ?? 'arrow';
+    $desktopClass = $desktopClass ?? 'text-xs font-medium text-indigo-600 hover:text-indigo-700';
+    $label = $label ?? '';
+@endphp
+
+<a href="{{ $href }}"
+   aria-label="{{ $label }}"
+   title="{{ $label }}"
+   class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-indigo-50 text-indigo-600 ring-1 ring-indigo-100 transition hover:bg-indigo-100 lg:h-auto lg:w-auto lg:rounded-none lg:bg-transparent lg:ring-0 lg:hover:bg-transparent">
+    <span class="lg:hidden">
+        @if ($icon === 'shield')
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/>
+            </svg>
+        @elseif ($icon === 'calendar')
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"/>
+            </svg>
+        @else
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/>
+            </svg>
+        @endif
+    </span>
+    <span class="hidden lg:inline {{ $desktopClass }}">{{ $label }}</span>
+</a>