@once
    @push('stylesheets')
        <link rel="stylesheet" href="{{asset('css/blue-button.css')}}"/>
    @endpush
@endonce


@props([
    'name' => null,
    'value' => null,
'id' => null,
'fullWidth' => false,
'route' => null,      //for buttons that have the role of link
'click' => null,      //for buttons that will trigger click event
'modal' => null,      //the id of the modal - for buttons that open modals
'pill' => null,       //for buttons that controls bootstrap tabs-pills
'form' => null,       //the id of the form - for buttons that submit forms
'class' => null,
'partial' => null,])

<button blade="{{ $viewName ?? 'unknown' }}" name="{{$name}}" value="{{$value}}" id="@if($id)
{{$id}}
@endif" class="blue-button @if($class)
{{$class}}
@endif   @if($fullWidth)
    fullWidth"
@endif @if($partial)
    {{ $partial }}"
@endif"
@if($route)
    onclick="window.location='{{$route}}'"
@endif
@if($click)
    onclick="{{$click}}"
@endif
@if($form)
    type="submit" form="{{ $form }}"
@else
    type="button"
@endif
@if($modal)
    data-toggle="modal" data-target="{{ $modal }}"
@endif
@if($pill)
    data-bs-toggle="pill" data-bs-target="{{ $pill }}" role="tab"
@endif
@if($partial)
    data-partial="{{ $partial }}"
@endif
>

<p class="blue-button-title">{{ $slot }}</p>

</button>