#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 fluxtor artisan command to install the button component easily:

php artisan fluxtor: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="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-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

When a form is submitted or a targeted method is triggered, the button will automatically show a loading indicator:

<x-ui.button size="xs" loading/>
<div class="ml-2">
    <x-ui.button loading/>
</div>
<div class="ml-4">
    <x-ui.button loading>Processing...</x-ui.button>
</div>

You can disable this behavior by explicitly setting :loading="false".

#div vs a vs button

by default the button is button tag (wooooooooow), 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