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

@@ -0,0 +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
+    aria-label="{{ $ariaLabel }}"
+    title="{{ $ariaLabel }}"
+    {{ $attributes->class(['btn-fab h-10 w-10 lg:hidden']) }}
+>
+    <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/frontdesk/dashboard.blade.php

@@ -33,7 +33,7 @@
         <section class="rounded-2xl border border-slate-200 bg-white">
             <div class="flex items-center justify-between border-b border-slate-100 px-5 py-4">
                 <h2 class="text-sm font-semibold text-slate-900">Currently inside</h2>
-                @include('frontdesk.partials.mobile-icon-link', [
+                @include('partials.mobile-icon-link', [
                     'href' => route('frontdesk.security.index'),
                     'label' => 'Security view',
                     'icon' => 'shield',
@@ -55,7 +55,7 @@
         <section class="rounded-2xl border border-slate-200 bg-white">
             <div class="flex items-center justify-between border-b border-slate-100 px-5 py-4">
                 <h2 class="text-sm font-semibold text-slate-900">Expected today</h2>
-                @include('frontdesk.partials.mobile-icon-link', [
+                @include('partials.mobile-icon-link', [
                     'href' => route('frontdesk.visits.calendar'),
                     'label' => 'Calendar',
                     'icon' => 'calendar',

resources/views/frontdesk/partials/reception-quick-actions.blade.php

@@ -6,28 +6,17 @@
 ])
 
 <div {{ $attributes->merge(['class' => 'flex shrink-0 items-center gap-2']) }}>
-  <a href="{{ route('frontdesk.visits.schedule') }}"
+    @include('partials.mobile-header-btn', [
-     aria-label="{{ $scheduleLabel }}"
+        'href' => route('frontdesk.visits.schedule'),
-     title="{{ $scheduleLabel }}"
+        'label' => $scheduleLabel,
-     class="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">
+        'desktopLabel' => $desktopSchedule,
-    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+        'variant' => 'outline',
-      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
+        'showDesktopIcon' => false,
-    </svg>
+    ])
-  </a>
+    @include('partials.mobile-header-btn', [
-  <a href="{{ route('frontdesk.visits.create') }}"
+        'href' => route('frontdesk.visits.create'),
-     aria-label="{{ $checkInLabel }}"
+        'label' => $checkInLabel,
-     title="{{ $checkInLabel }}"
+        'desktopLabel' => $desktopCheckIn,
-     class="btn-fab h-10 w-10 lg:hidden">
+        'variant' => 'primary',
-    <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true">
+    ])
-      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
-    </svg>
-  </a>
-  <a href="{{ route('frontdesk.visits.schedule') }}"
-     class="hidden items-center rounded-lg border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 lg:inline-flex">
-    {{ $desktopSchedule }}
-  </a>
-  <a href="{{ route('frontdesk.visits.create') }}"
-     class="btn-primary hidden whitespace-nowrap lg:inline-flex">
-    {{ $desktopCheckIn }}
-  </a>
 </div>

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

@@ -1,14 +1,13 @@
-@props([
+@php
-    'href',
+    $icon = $icon ?? 'arrow';
-    'label',
+    $desktopClass = $desktopClass ?? 'text-xs font-medium text-indigo-600 hover:text-indigo-700';
-    'icon',
+    $label = $label ?? '';
-    'desktopClass' => 'text-xs font-medium text-indigo-600 hover:text-indigo-700',
+@endphp
-])
 
 <a href="{{ $href }}"
    aria-label="{{ $label }}"
    title="{{ $label }}"
-   {{ $attributes->merge(['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']) }}>
+   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">
@@ -18,6 +17,10 @@
             <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>