{!! PrelineForm::submit('Save changes')->primary() !!}
{!! PrelineForm::button('Create user')->primary() !!}

<button type="submit" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
    Save changes
</button>

{!! PrelineForm::button('Cancel')->secondary() !!}
{!! PrelineForm::link('Back', route('users.index'))->secondary() !!}

<button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
    Cancel
</button>

{!! PrelineForm::submit('Delete user')->danger() !!}
{!! PrelineForm::button('Remove access')->danger() !!}

<button type="submit" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-red-600 text-white hover:bg-red-700 focus:outline-none focus:bg-red-700 disabled:opacity-50 disabled:pointer-events-none">
    Delete user
</button>

{!! PrelineForm::submit('Approve')->success() !!}
{!! PrelineForm::button('Confirm payment')->success() !!}

<button type="submit" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-green-600 text-white hover:bg-green-700 focus:outline-none focus:bg-green-700 disabled:opacity-50 disabled:pointer-events-none">
    Approve
</button>

{!! PrelineForm::submit('Save changes')->primary()->icon('
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
    </svg>
') !!}

<button type="submit" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700">
    <x-heroicon-o-check class="w-4 h-4" />
    Save changes
</button>

<button 
    type="submit" 
    x-data="{ loading: false }"
    @click="loading = true"
    :disabled="loading"
    class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
>
    <svg x-show="loading" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
    </svg>
    <span x-show="!loading">Save changes</span>
    <span x-show="loading">Saving...</span>
</button>

<div class="inline-flex rounded-lg shadow-sm">
    <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-white text-gray-800 hover:bg-gray-50 dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700">
        Edit
    </button>
    <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-white text-gray-800 hover:bg-gray-50 dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700">
        Duplicate
    </button>
    <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 -ms-px first:rounded-s-lg first:ms-0 last:rounded-e-lg text-sm font-medium focus:z-10 border border-gray-200 bg-white text-gray-800 hover:bg-gray-50 dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700">
        Delete
    </button>
</div>

{{-- Small --}}
<button class="py-2 px-3 text-sm ...">Small</button>
{{-- Default --}}
<button class="py-3 px-4 text-sm ...">Default</button>
{{-- Large --}}
<button class="py-4 px-5 text-base ...">Large</button>

{!! PrelineForm::submit('Save')->primary()->disabled($user->isLocked()) !!}

<button 
    type="submit"
    :disabled="!agreed"
    class="... disabled:opacity-50 disabled:pointer-events-none"
>
    Submit
</button>

{!! PrelineForm::link('View details', route('users.show', $user))->primary() !!}

<a href="/users/123" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700">
    View details
</a>

<div class="flex items-center justify-between">
    <div class="flex gap-3">
        {!! PrelineForm::submit('Save')->primary() !!}
        {!! PrelineForm::button('Save as draft')->secondary() !!}
    </div>
    <div>
        {!! PrelineForm::link('Cancel', route('users.index'))->secondary() !!}
    </div>
</div>

<button 
    type="button"
    @click="$dispatch('open-modal', 'confirm-delete')"
    class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-red-600 text-white hover:bg-red-700"
>
    Delete user
</button>

# Inspect button HTML
php artisan tinker
>>> PrelineForm::submit('Save')->primary()
# Test button states
# Click button → verify loading state
# Submit form → verify disabled state
# Check dark mode → verify dark: classes apply
# Accessibility check
# Verify type="submit" vs type="button"
# Verify disabled state prevents clicks
# Verify focus styles (focus:outline-none focus:bg-*)