Trigger Components

Scoutify provides several pre-built components to trigger the search modal.

Desktop Trigger

The <x-scoutify::gs.trigger /> component is a pill-shaped button with a label and a ⌘K badge. It’s designed for use in navigation bars or headers on desktop screens.

<x-scoutify::gs.trigger class="hidden lg:inline-flex" />

Mobile Trigger

The <x-scoutify::gs.trigger-mobile /> component is a 44x44 px icon-only button, meeting accessibility guidelines for touch targets.

<x-scoutify::gs.trigger-mobile class="lg:hidden" />

Modal Placement

The <livewire:scoutify::modal /> component must be placed at the root of your layout, preferably after your main content slot.

{{-- resources/views/layouts/app.blade.php --}}
{{ $slot }}

<livewire:scoutify::modal />

Danger

Common Pitfall: Placing the modal inside a collapsible container (like a sidebar or drawer) will prevent it from mounting correctly, causing the trigger to appear broken.

Filament Integration

When using Scoutify with Filament, ensure the modal is placed outside the Filament panel scope to avoid layout conflicts.