Button Components

Button components provide consistent, accessible, and visually appealing action elements. LaraDashboard includes a versatile button component with multiple variants, icon support, and Livewire loading state integration.

Available Button Components#

Component	Purpose
<x-buttons.button>	Primary button component with all variants
<x-buttons.action-buttons>	Grouped action buttons for tables/lists
<x-buttons.action-item>	Individual action item in dropdown
<x-buttons.submit-buttons>	Form submission button group
<x-buttons.drawer-close>	Close button for drawers

---

Button Component#

The main button component with full customization options including variants, icons, loading states, and link rendering.

Props#

Prop	Type	Default	Description
type	string	'button'	Button type: button, submit, reset
variant	string	'default'	Visual style variant
class	string	''	Additional CSS classes
disabled	boolean	false	Disable the button
as	string	'button'	Render as button or a (link)
href	string	null	URL when rendered as link
icon	string	null	Iconify icon identifier
iconPosition	string	'left'	Icon position: left or right
loading	boolean	false	Show loading spinner (server-side)
loadingText	string	null	Text to show during loading
loadingTarget	string	null	Livewire wire:target for reactive loading

Variants#

Variant	Class	Use Case
primary	btn-primary	Primary actions (save, submit, confirm)
success	btn-success	Positive actions (create, add, approve)
danger	btn-danger	Destructive actions (delete, remove)
warning	btn-warning	Cautionary actions
info	btn-info	Informational actions
secondary	btn-secondary	Secondary/alternative actions
default	btn-default	Neutral actions (cancel, close)

Basic Usage#

{{-- Primary button --}}
<x-buttons.button variant="primary">
    Save Changes
</x-buttons.button>

{{-- Secondary button --}}
<x-buttons.button variant="secondary">
    Cancel
</x-buttons.button>

{{-- Danger button --}}
<x-buttons.button variant="danger">
    Delete
</x-buttons.button>

With Icons#

{{-- Icon on the left (default) --}}
<x-buttons.button variant="primary" icon="lucide:save">
    Save
</x-buttons.button>

{{-- Icon on the right --}}
<x-buttons.button variant="primary" icon="lucide:arrow-right" iconPosition="right">
    Next
</x-buttons.button>

{{-- Multiple icons example --}}
<x-buttons.button variant="success" icon="lucide:plus">
    Add New User
</x-buttons.button>

As Link#

{{-- Render as anchor tag --}}
<x-buttons.button as="a" href="{{ route('users.create') }}" variant="primary" icon="feather:plus">
    Create User
</x-buttons.button>

{{-- External link --}}
<x-buttons.button as="a" href="https://example.com" variant="info" icon="lucide:external-link">
    Visit Website
</x-buttons.button>

Submit Button#

<form wire:submit="save">
    {{-- Form fields... --}}

    <x-buttons.button type="submit" variant="primary">
        Submit Form
    </x-buttons.button>
</form>

Loading States#

Server-Side Loading#

{{-- Static loading state --}}
<x-buttons.button variant="primary" :loading="$isProcessing" loadingText="Saving...">
    Save
</x-buttons.button>

Livewire Reactive Loading#

{{-- Automatically shows spinner when Livewire action runs --}}
<x-buttons.button
    variant="primary"
    loadingTarget="save"
    wire:click="save"
>
    Save Changes
</x-buttons.button>

{{-- With custom loading text --}}
<x-buttons.button
    variant="primary"
    loadingTarget="processPayment"
    loadingText="Processing..."
    wire:click="processPayment"
>
    Pay Now
</x-buttons.button>

Disabled State#

{{-- Disabled button --}}
<x-buttons.button variant="primary" :disabled="true">
    Cannot Click
</x-buttons.button>

{{-- Conditionally disabled --}}
<x-buttons.button variant="primary" :disabled="!$canSubmit">
    Submit
</x-buttons.button>

Real Examples from Codebase#

{{-- From user management --}}
<x-buttons.button
    as="a"
    href="{{ route('admin.users.create') }}"
    variant="primary"
    icon="feather:plus"
>
    {{ __('Create User') }}
</x-buttons.button>

{{-- Form submit with loading --}}
<x-buttons.button
    type="submit"
    variant="primary"
    loadingTarget="save"
    icon="lucide:check"
>
    {{ __('Save Changes') }}
</x-buttons.button>

{{-- Delete button --}}
<x-buttons.button
    variant="danger"
    wire:click="delete"
    wire:confirm="Are you sure you want to delete this item?"
    icon="lucide:trash-2"
>
    {{ __('Delete') }}
</x-buttons.button>

---

Action Buttons#

Pre-configured button group for common actions like edit, view, and delete. Typically used in data tables.

Basic Usage#

<x-buttons.action-buttons
    :item="$user"
    editRoute="admin.users.edit"
    deleteAction="delete"
/>

Real Example from Codebase#

{{-- In a Livewire datatable --}}
@foreach($users as $user)
    <tr>
        <td>{{ $user->name }}</td>
        <td>{{ $user->email }}</td>
        <td>
            <x-buttons.action-buttons
                :item="$user"
                editRoute="admin.users.edit"
                viewRoute="admin.users.show"
                deleteAction="delete"
            />
        </td>
    </tr>
@endforeach

---

Action Item#

Individual action item component for use in dropdown menus or action lists.

Props#

Prop	Type	Default	Description
href	string	null	Link URL
icon	string	null	Iconify icon
variant	string	'default'	Color variant
click	string	null	Livewire/Alpine click action

Basic Usage#

<x-buttons.action-item href="{{ route('users.edit', $user) }}" icon="lucide:edit">
    Edit User
</x-buttons.action-item>

<x-buttons.action-item
    variant="danger"
    click="delete({{ $user->id }})"
    icon="lucide:trash-2"
>
    Delete User
</x-buttons.action-item>

---

Submit Buttons#

A pre-configured button group for form submission with Save and Cancel buttons.

Props#

Prop	Type	Default	Description
saveLabel	string	'Save'	Label for save button
cancelLabel	string	'Cancel'	Label for cancel button
cancelUrl	string	null	URL for cancel button
loadingTarget	string	'save'	Livewire loading target

Basic Usage#

<form wire:submit="save">
    {{-- Form fields... --}}

    <x-buttons.submit-buttons
        saveLabel="Create User"
        cancelUrl="{{ route('admin.users.index') }}"
    />
</form>

Real Example from Codebase#

{{-- In a create/edit form --}}
<x-card.card>
    <x-slot name="header">{{ __('Edit User') }}</x-slot>

    <form wire:submit="save">
        <div class="space-y-4">
            <x-inputs.input label="Name" name="name" wire:model="name" />
            <x-inputs.input label="Email" name="email" wire:model="email" />
        </div>

        <x-slot name="footer">
            <x-buttons.submit-buttons
                saveLabel="{{ __('Update User') }}"
                cancelUrl="{{ route('admin.users.index') }}"
                loadingTarget="save"
            />
        </x-slot>
    </form>
</x-card.card>

---

Drawer Close Button#

A specialized button for closing drawer components.

Basic Usage#

<x-drawer btn="Open Settings" title="Settings">
    <p>Drawer content here...</p>

    <x-buttons.drawer-close>
        Close Drawer
    </x-buttons.drawer-close>
</x-drawer>

---

Button CSS Classes Reference#

The button component uses these base CSS classes that you can also use directly:

Class	Description
btn	Base button styles
btn-primary	Primary blue button
btn-success	Green success button
btn-danger	Red danger button
btn-warning	Yellow warning button
btn-info	Light blue info button
btn-secondary	Gray secondary button
btn-default	Default/neutral button
btn-outline-primary	Outlined primary button
btn-outline-secondary	Outlined secondary button

Using Classes Directly#

{{-- Using raw classes when needed --}}
<button class="btn btn-primary">
    Save
</button>

<a href="/users" class="btn btn-secondary">
    Back to Users
</a>

---

Icon Reference#

Common icons used with buttons (using Iconify):

Icon	Identifier	Use Case
Plus	lucide:plus / feather:plus	Create/Add
Save	lucide:save	Save
Edit	lucide:edit / lucide:pencil	Edit
Trash	lucide:trash-2	Delete
Check	lucide:check	Confirm
X	lucide:x	Cancel/Close
Arrow Right	lucide:arrow-right	Next
Arrow Left	lucide:arrow-left	Back
Download	lucide:download	Download
Upload	lucide:upload	Upload
Eye	lucide:eye	View
Settings	lucide:settings	Settings

---

Best Practices#

1. Use semantic variants - Match button variant to action type (danger for delete, success for create)
2. Include icons for clarity - Icons help users quickly identify action purpose
3. Provide loading feedback - Always show loading state for async operations
4. Keep labels concise - Use short, action-oriented text (e.g., "Save" not "Click here to save")
5. Disable appropriately - Disable buttons when action isn't available
6. Use proper types - Use type="submit" for form submissions
7. Confirm destructive actions - Add confirmation for delete/irreversible actions

---

Next Steps#

• Inputs - Learn about form input components
• Cards - Build layouts with card components
• Modals - Create dialog overlays