LaraUI - V1.0

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:
  • A full icon class string like fa fa-plus
  • Or a short key like plus which is resolved from:
    config('component.icon_map')
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 button or anchor
  • ✅ Optional SweetAlert confirmation
  • ✅ Direct or mapped icon support
  • ✅ Method spoofing and extra attributes