Loading Button

Button with built-in loading state management.

Examples

Loading State

Button automatically shows a spinner when the linked variable is true.

blade

<div x-data="{ isLoading: false }">
    ...
    <x-plume::button.loader var="isLoading"
        >
        Save Changes
    </x-plume::button.loader>
    ...
</div>

Prop	Type	Default	Description
var	string	null	The name of the AlpineJS boolean variable that controls the loading state.
size	string	'md'	Size of the button: 'sm', 'md', 'lg'.
style	string	null	Visual style of the button.

Usage

blade

<x-plume::button.loader var="isSaving">
    Save
</x-plume::button.loader>