Button
The <x-xf::button> component is a flexible and reusable button element designed for both UI and functional consistency. It supports SweetAlert confirmation popups, form method spoofing, icons, and more. Ideal for dynamic UI actions within your private Laravel applications.
📄 <x-xf::button>
📘 Description
The <x-xf::button> component provides a styled, flexible, and interactive button or link element. It supports SweetAlert confirmations, dynamic attributes, HTTP method spoofing, and icon rendering via direct class or mapped key from config.
✅ Usage Example
<x-xf::button
type="primary"
size="md"
label="Add"
icon="plus"
:confirm="true"
confirmKey="create_item"
/>
<x-xf::button
type="danger"
label="Delete"
icon="fa fa-trash"
method="DELETE"
:confirm="true"
/>
🔑 Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
type |
string | ❌ | 'primary' |
Visual style of the button (e.g., primary, danger). |
size |
string | ❌ | 'sm' |
Size of the button: sm, md, lg. |
prevent |
bool | ❌ | false |
Prevent default behavior for JavaScript handling. |
confirm |
bool | ❌ | true |
Enable SweetAlert confirmation popup before action. |
confirmKey |
string | ❌ | 'default' |
Confirmation settings key from config('component.confirm'). |
attr |
array | ❌ | [] | Extra HTML attributes to pass to the element. |
label |
string|null | ❌ | null | Text displayed inside the button. |
href |
string|null | ❌ | null | If set, renders an anchor <a>. If not, renders a <button>. |
class |
string|null | ❌ | null | Extra custom CSS classes. |
icon |
string|null | ❌ | null | You can pass:
|
method |
string|null | ❌ | null | HTTP method to spoof when used inside a form (e.g., DELETE). |
⚙️ Example Config
'icon_map' => [
'plus' => 'fa fa-plus',
'trash' => 'fa fa-trash',
'edit' => 'fa fa-edit',
],
🎯 Features
- ✅ Smart rendering of
buttonoranchor - ✅ Optional SweetAlert confirmation
- ✅ Direct or mapped icon support
- ✅ Method spoofing and extra attributes