# Button

<figure><img src="https://117397612-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSlG6RrSDmGrQX2xjM6AT%2Fuploads%2FBY3ujgID5MFS2wsM8FnW%2Fimage.png?alt=media&#x26;token=4e35a823-cba9-4ec1-850b-635e4dea0b10" alt=""><figcaption></figcaption></figure>

we are using buttons everywhere on the dashboard so we do 1 component to manage button types and button multi-style

## Use

you can add a new button like this

```html
<x-tomato-admin-button 
    :modal="true" 
    :href="route('admin.community-events.create')" 
    type="link"
>
    {{ __('Create User') }}
</x-tomato-admin-button>
```

or you can use it as an icon button inside a table like this

<figure><img src="https://117397612-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSlG6RrSDmGrQX2xjM6AT%2Fuploads%2Fwc8Rhmhpkak1IMdyNf9E%2Fimage.png?alt=media&#x26;token=b30fd830-0fd0-4bef-884b-ae6989778196" alt=""><figcaption></figcaption></figure>

```html
<x-tomato-admin-button 
    success 
    type="icon" 
    label="{{trans('tomato-admin::global.crud.view')}}" 
    modal 
    :href="route('admin.users.show', $item->id)"
>
    <x-heroicon-s-eye class="h-6 w-6"/>
</x-tomato-admin-button>
```

<figure><img src="https://117397612-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSlG6RrSDmGrQX2xjM6AT%2Fuploads%2F9IQKIY7fH6stgmyrxLFW%2Fimage.png?alt=media&#x26;token=5961e11a-b1db-4164-a5f0-1ff04a89edc4" alt=""><figcaption></figcaption></figure>

and the button works as well as the `x-splade-link` so you can create a delete button like this

```html
<x-tomato-admin-button 
    danger 
    type="icon" 
    label="{{trans('tomato-admin::global.crud.delete')}}" 
    :href="route('admin.bills.destroy', $item->id)"
    confirm="{{trans('tomato-admin::global.crud.delete-confirm')}}"
    confirm-text="{{trans('tomato-admin::global.crud.delete-confirm-text')}}"
    confirm-button="{{trans('tomato-admin::global.crud.delete-confirm-button')}}"
    cancel-button="{{trans('tomato-admin::global.crud.delete-confirm-cancel-button')}}"
    method="delete"
>
    <x-heroicon-s-trash class="h-6 w-6"/>
</x-tomato-admin-button>
```
