#Button Component

#Introduction

The button component provides a reusable UI element that saves you from creating complex button elements each time you need one. It offers multiple variants, sizes, and customization options to fit your design needs.

#Installation

Use the sheaf artisan command to install the button component easily:

php artisan sheaf:install button

#Basic Usage

<x-ui.button>
    Button
</x-ui.button>    
<x-ui.button variant="ghost">
    Ghost
</x-ui.button>
<x-ui.button variant="outline">
    Outline
</x-ui.button>

#Customization

#Sizes

The button component uses md size as the default, but you can adjust the size to meet your needs.

<x-ui.button size="lg">
    Large
</x-ui.button>
<!-- Default size is 'md' -->
<x-ui.button>
    Medium (Default)
</x-ui.button>    
<x-ui.button size="sm">
    Small
</x-ui.button>
<x-ui.button size="xs">
    Extra Small
</x-ui.button>

#Colors

A wide range of colors are available for customizing button appearance.

#Primary variant

<div class="grid grid-cols-6 gap-4">
    <x-ui.button color="slate">Slate</x-ui.button>
    <x-ui.button color="stone">Stone</x-ui.button>
    <x-ui.button color="neutral">Neutral</x-ui.button>
    <x-ui.button color="zinc">Zinc</x-ui.button>
    <x-ui.button color="red">Red</x-ui.button>
    <x-ui.button color="orange">Orange</x-ui.button>
    <x-ui.button color="amber">Amber</x-ui.button>
    <x-ui.button color="yellow">Yellow</x-ui.button>
    <x-ui.button color="lime">Lime</x-ui.button>
    <x-ui.button color="green">Green</x-ui.button>
    <x-ui.button color="emerald">Emerald</x-ui.button>
    <x-ui.button color="teal">Teal</x-ui.button>
    <x-ui.button color="cyan">Cyan</x-ui.button>
    <x-ui.button color="sky">Sky</x-ui.button>
    <x-ui.button color="blue">Blue</x-ui.button>
    <x-ui.button color="indigo">Indigo</x-ui.button>
    <x-ui.button color="violet">Violet</x-ui.button>
    <x-ui.button color="purple">Purple</x-ui.button>
    <x-ui.button color="fuchsia">Fuchsia</x-ui.button>
    <x-ui.button color="pink">Pink</x-ui.button>
    <x-ui.button color="rose">Rose</x-ui.button>
</div>  

#Outline variant

<div class="grid grid-cols-3 lg:grid-cols-6 gap-4">
     <x-ui.button variant="outline" color="slate">Slate</x-ui.button>
    <x-ui.button variant="outline" color="stone">Stone</x-ui.button>
    <x-ui.button variant="outline" color="neutral">Neutral</x-ui.button>
    <x-ui.button variant="outline" color="zinc">Zinc</x-ui.button>
    <x-ui.button variant="outline" color="red">Red</x-ui.button>
    <x-ui.button variant="outline" color="orange">Orange</x-ui.button>
    <x-ui.button variant="outline" color="amber">Amber</x-ui.button>
    <x-ui.button variant="outline" color="yellow">Yellow</x-ui.button>
    <x-ui.button variant="outline" color="lime">Lime</x-ui.button>
    <x-ui.button variant="outline" color="green">Green</x-ui.button>
    <x-ui.button variant="outline" color="emerald">Emerald</x-ui.button>
    <x-ui.button variant="outline" color="teal">Teal</x-ui.button>
    <x-ui.button variant="outline" color="cyan">Cyan</x-ui.button>
    <x-ui.button variant="outline" color="sky">Sky</x-ui.button>
    <x-ui.button variant="outline" color="blue">Blue</x-ui.button>
    <x-ui.button variant="outline" color="indigo">Indigo</x-ui.button>
    <x-ui.button variant="outline" color="violet">Violet</x-ui.button>
    <x-ui.button variant="outline" color="purple">Purple</x-ui.button>
    <x-ui.button variant="outline" color="fuchsia">Fuchsia</x-ui.button>
    <x-ui.button variant="outline" color="pink">Pink</x-ui.button>
    <x-ui.button variant="outline" color="rose">Rose</x-ui.button>>
</div>  

#Variants

The component supports 6 different visual variants:

<x-ui.button>
    Button
</x-ui.button>    
<x-ui.button variant="ghost">
    Ghost
</x-ui.button>
<x-ui.button variant="outline">
    Outline
</x-ui.button>
<x-ui.button variant="solid">
    solid
</x-ui.button>
<x-ui.button variant="soft">
    soft
</x-ui.button>
<x-ui.button variant="danger">
    Danger
</x-ui.button>   

#Icons

The button component supports icons both before and after the text content.

<div class="flex gap-2">    
    <x-ui.button size="lg" iconAfter="arrows-pointing-out">Full Screen</x-ui.button>
    <x-ui.button icon="arrow-path">Loading...</x-ui.button>
    <x-ui.button size="sm" iconAfter="arrow-trending-up"/>
    <x-ui.button size="xs" icon="ellipsis-horizontal" />
</div>

#Loading State

The button can display a loading indicator when a Livewire action is being processed or when a targeted property is updating.

#Livewire Loading

By default, the loading state is triggered by a wire:click or wire:submit action.

<x-ui.button size="xs" wire:loading />

<div class="ml-2">
    <x-ui.button wire:loading />
</div>

<div class="ml-4">
    <x-ui.button wire:loading>Processing...</x-ui.button>
</div>

You can override this using wire:target. See Livewire Loading Docs for more information.

#Static Loading

You can also display the loading indicator manually using the loading prop, regardless of Livewire actions:

<x-ui.button :loading="true">Processing...</x-ui.button>

#div vs a vs button

by default the button is button tag , you can change it to a link by providing href attribtue:

    <x-ui.button href="https://convergephp.com" target="_blank">
        converge
    </x-ui.button>

#Component Props