@props([
    'submit_text' => __('admin.creates_txt'),
    'reset_text'  => __('admin.reset_txt'),
    'cancel_url'  => '#',
    'cancel_text' => '<span class="icon-on"><i class="ri-arrow-left-line"></i> '.__('admin.cancel_txt').'</span>',

    // CSS class props with sensible defaults
    'submit_class' => 'btn-primary',
    'reset_class'  => 'btn-soft-success',
    'cancel_class' => 'btn-outline-secondary custom-toggle ms-3',
])

<div class="col-md-12">
    <div class="hstack gap-2 justify-content-end">
        {{-- Submit --}}
        <x-form.field.button 
            id="submit" 
            name="submit" 
            text="{{ $submit_text }}" 
            class="{{ $submit_class }}"
        />

        {{-- Reset --}}
        <x-form.field.button 
            type="reset" 
            id="reset" 
            name="reset" 
            text="{{ $reset_text }}" 
            class="{{ $reset_class }}"
        />

        {{-- Cancel --}}
        <x-link_cancel 
            url="javascript:;" 
            class="{{ $cancel_class }}"
            onclick="event.preventDefault(); parent.Fancybox.close(); parent.location.href='{{ $cancel_url }}';"
        >
            {{ $cancel_text }}
        </x-link_cancel>
    </div>
</div>