Action
Button
A basic button component is a clickable user interface element that can trigger an action or event when interacted with.
<x-button>
Button
</x-button>
Usage
Different button variants
<x-button variant="fill">
Fill variant
</x-button>
<x-button variant="outline">
Outline variant
</x-button>
<x-button variant="soft">
Soft variant
</x-button>
<x-button variant="ghost">
Ghost variant
</x-button>
<x-button variant="link">
Link variant
</x-button>
Different button sizes
<x-button size="sm">
small
</x-button>
<x-button size="md">
medium
</x-button>
<x-button size="lg">
large
</x-button>
<x-button size="xl">
extra large
</x-button>
Different button color schemes
<x-button color="primary">
Primary
</x-button>
<x-button color="secondary">
Secondary
</x-button>
<x-button color="neutral">
Neutral
</x-button>
<x-button color="success">
Success
</x-button>
<x-button color="warning">
Warning
</x-button>
<x-button color="error">
Error
</x-button>
With Alpine click event
<x-button x-data x-on:click="alert('button clicked!')">
Alpine.js example
</x-button>
With Livewire click event
<x-button wire:click="save" wire:loading.attr="disabled">
<x-loader wire:loading wire:target="save" class="mr-3"/>
Livewire example
</x-button>