WARNING! You are browsing the docs for an old version of TallStackUI!

Powerful suite of Blade components for TALL Stack apps.

Button

Button component.

WARNING!

You are browsing the docs for an old version of TallStackUI. Consider upgrade your project to TallStackUI v3.

# Basic Usage 

<x-button>TallStackUi</x-button>
 
<!-- or -->
 
<x-button text="TallStackUi" />

# Button as Link

TallStackUI 
<x-button href="https://google.com.br" target="_blank">TallStackUi</x-button>

# Square Variation 

<x-button square>TallStackUi</x-button>

# Round Variation 

<x-button round>TallStackUi</x-button>

# Left & Right Slots 

<x-button>
    <x-slot:left>
        <x-badge color="yellow" text="+99" round light />
    </x-slot:left>
    TallStackUi
</x-button>
<x-button>
    <x-slot:right>
        <x-badge color="yellow" text="+99" round light />
    </x-slot:right>
    TallStackUi
</x-button>

# Icon Slot

An option to use any Heroicon.

<x-button icon="cog" position="left">TallStackUi</x-button>
<x-button icon="users" position="right">TallStackUi</x-button>

# Size Variations 

<x-button xs>TallStackUi</x-button>
<x-button sm>TallStackUi</x-button>
<x-button md>TallStackUi</x-button>
<x-button lg>TallStackUi</x-button>

# Loading Effect 

<x-button wire:click="target" loading>
    Basic
</x-button>
 
<!-- You can specify the target of the delay (method or property) -->
 
<x-button wire:click="target" loading="target">
    Loading Target
</x-button>
 
<!-- You can use all the Livewire delay options: shortest, shorter, short, long, longer, longest -->
 
<x-button wire:click="delay" loading="target" delay="longest">
    Delay Control
</x-button>

Starting from version 1.35.0 you can use the position attribute to define the position of the loading icon: left or right , by default it will be on the left.

# Color Variations 

<x-button text="Primary" />
<x-button text="Secondary" color="secondary" />
<x-button text="Slate" color="slate" />
<x-button text="Gray" color="gray" />
<x-button text="Zinc" color="zinc" />
<x-button text="Neutral" color="neutral" />
<x-button text="Stone" color="stone" />
<x-button text="Red" color="red" />
<x-button text="Orange" color="orange" />
<x-button text="Amber" color="amber" />
<x-button text="Yellow" color="yellow" />
<x-button text="Lime" color="lime" />
<x-button text="Green" color="green" />
<x-button text="Emerald" color="emerald" />
<x-button text="Teal" color="teal" />
<x-button text="Cyan" color="cyan" />
<x-button text="Sky" color="sky" />
<x-button text="Blue" color="blue" />
<x-button text="Indigo" color="indigo" />
<x-button text="Violet" color="violet" />
<x-button text="Purple" color="purple" />
<x-button text="Fuchsia" color="fuchsia" />
<x-button text="Pink" color="pink" />
<x-button text="Rose" color="rose" />
<x-button text="Black" color="black" />
<x-button text="White" color="white" />

# Light Variations 

<x-button text="Primary" light />
<x-button text="Secondary" color="secondary" light />
<x-button text="Slate" color="slate" light />
<x-button text="Gray" color="gray" light />
<x-button text="Zinc" color="zinc" light />
<x-button text="Neutral" color="neutral" light />
<x-button text="Stone" color="stone" light />
<x-button text="Red" color="red" light />
<x-button text="Orange" color="orange" light />
<x-button text="Amber" color="amber" light />
<x-button text="Yellow" color="yellow" light />
<x-button text="Lime" color="lime" light />
<x-button text="Green" color="green" light />
<x-button text="Emerald" color="emerald" light />
<x-button text="Teal" color="teal" light />
<x-button text="Cyan" color="cyan" light />
<x-button text="Sky" color="sky" light />
<x-button text="Blue" color="blue" light />
<x-button text="Indigo" color="indigo" light />
<x-button text="Violet" color="violet" light />
<x-button text="Purple" color="purple" light />
<x-button text="Fuchsia" color="fuchsia" light />
<x-button text="Pink" color="pink" light />
<x-button text="Rose" color="rose" light />
<x-button text="Black" color="black" light />
<x-button text="White" color="white" light />

# Outline Variations 

<x-button text="Primary" outline />
<x-button text="Secondary" color="secondary" outline />
<x-button text="Slate" color="slate" outline />
<x-button text="Gray" color="gray" outline />
<x-button text="Zinc" color="zinc" outline />
<x-button text="Neutral" color="neutral" outline />
<x-button text="Stone" color="stone" outline />
<x-button text="Red" color="red" outline />
<x-button text="Orange" color="orange" outline />
<x-button text="Amber" color="amber" outline />
<x-button text="Yellow" color="yellow" outline />
<x-button text="Lime" color="lime" outline />
<x-button text="Green" color="green" outline />
<x-button text="Emerald" color="emerald" outline />
<x-button text="Teal" color="teal" outline />
<x-button text="Cyan" color="cyan" outline />
<x-button text="Sky" color="sky" outline />
<x-button text="Blue" color="blue" outline />
<x-button text="Indigo" color="indigo" outline />
<x-button text="Violet" color="violet" outline />
<x-button text="Purple" color="purple" outline />
<x-button text="Fuchsia" color="fuchsia" outline />
<x-button text="Pink" color="pink" outline />
<x-button text="Rose" color="rose" outline />
<x-button text="Black" color="black" outline />
<x-button text="White" color="white" outline />

# Flat Variations 

<x-button text="Primary" flat />
<x-button text="Secondary" color="secondary" flat />
<x-button text="Slate" color="slate" flat />
<x-button text="Gray" color="gray" flat />
<x-button text="Zinc" color="zinc" flat />
<x-button text="Neutral" color="neutral" flat />
<x-button text="Stone" color="stone" flat />
<x-button text="Red" color="red" flat />
<x-button text="Orange" color="orange" flat />
<x-button text="Amber" color="amber" flat />
<x-button text="Yellow" color="yellow" flat />
<x-button text="Lime" color="lime" flat />
<x-button text="Green" color="green" flat />
<x-button text="Emerald" color="emerald" flat />
<x-button text="Teal" color="teal" flat />
<x-button text="Cyan" color="cyan" flat />
<x-button text="Sky" color="sky" flat />
<x-button text="Blue" color="blue" flat />
<x-button text="Indigo" color="indigo" flat />
<x-button text="Violet" color="violet" flat />
<x-button text="Purple" color="purple" flat />
<x-button text="Fuchsia" color="fuchsia" flat />
<x-button text="Pink" color="pink" flat />
<x-button text="Rose" color="rose" flat />
<x-button text="Black" color="black" flat />
<x-button text="White" color="white" flat />
Circle

# Basic Usage 

<x-button.circle>TS</x-button.circle>
 
<!-- or -->
 
<x-button.circle text="TS" />

# Button as Link 

<x-button.circle href="https://google.com.br" target="_blank">TS</x-button.circle>

# Icon Slot

An option to use any Heroicon.

<x-button.circle icon="pencil" />

# Size Variations

An option to use any Heroicon.

<x-button.circle text="SM" sm/>
<x-button.circle text="MD" />
<x-button.circle text="LG" lg/>

# Loading Effect 

<x-button.circle wire:click="basic" icon="pencil" loading />
 
<!-- You can specify the target of the delay (method or property) -->
 
<x-button.circle wire:click="target"
                 icon="pencil"
                 loading="target" />
 
 <!-- You can use all the Livewire delay options: shortest, shorter, short, long, longer, longest -->
 
<x-button.circle wire:click="delay"
                 icon="pencil"
                 loading="target"
                 delay="longest" />

# Color Variations 

<x-button.circle icon="bookmark" />
<x-button.circle icon="bookmark" color="secondary" />
<x-button.circle icon="bookmark" color="slate" />
<x-button.circle icon="bookmark" color="gray" />
<x-button.circle icon="bookmark" color="zinc" />
<x-button.circle icon="bookmark" color="neutral" />
<x-button.circle icon="bookmark" color="stone" />
<x-button.circle icon="bookmark" color="red" />
<x-button.circle icon="bookmark" color="orange" />
<x-button.circle icon="bookmark" color="amber" />
<x-button.circle icon="bookmark" color="yellow" />
<x-button.circle icon="bookmark" color="lime" />
<x-button.circle icon="bookmark" color="green" />
<x-button.circle icon="bookmark" color="emerald" />
<x-button.circle icon="bookmark" color="teal" />
<x-button.circle icon="bookmark" color="cyan" />
<x-button.circle icon="bookmark" color="sky" />
<x-button.circle icon="bookmark" color="blue" />
<x-button.circle icon="bookmark" color="indigo" />
<x-button.circle icon="bookmark" color="violet" />
<x-button.circle icon="bookmark" color="purple" />
<x-button.circle icon="bookmark" color="fuchsia" />
<x-button.circle icon="bookmark" color="pink" />
<x-button.circle icon="bookmark" color="rose" />
<x-button.circle icon="bookmark" color="black" />
<x-button.circle icon="bookmark" color="white" />

# Light Variations 

<x-button.circle icon="bookmark" light />
<x-button.circle icon="bookmark" color="secondary" light />
<x-button.circle icon="bookmark" color="slate" light />
<x-button.circle icon="bookmark" color="gray" light />
<x-button.circle icon="bookmark" color="zinc" light />
<x-button.circle icon="bookmark" color="neutral" light />
<x-button.circle icon="bookmark" color="stone" light />
<x-button.circle icon="bookmark" color="red" light />
<x-button.circle icon="bookmark" color="orange" light />
<x-button.circle icon="bookmark" color="amber" light />
<x-button.circle icon="bookmark" color="yellow" light />
<x-button.circle icon="bookmark" color="lime" light />
<x-button.circle icon="bookmark" color="green" light />
<x-button.circle icon="bookmark" color="emerald" light />
<x-button.circle icon="bookmark" color="teal" light />
<x-button.circle icon="bookmark" color="cyan" light />
<x-button.circle icon="bookmark" color="sky" light />
<x-button.circle icon="bookmark" color="blue" light />
<x-button.circle icon="bookmark" color="indigo" light />
<x-button.circle icon="bookmark" color="violet" light />
<x-button.circle icon="bookmark" color="purple" light />
<x-button.circle icon="bookmark" color="fuchsia" light />
<x-button.circle icon="bookmark" color="pink" light />
<x-button.circle icon="bookmark" color="rose" light />
<x-button.circle icon="bookmark" color="black" light />
<x-button.circle icon="bookmark" color="white" light />

# Outline Variations 

<x-button.circle icon="bookmark" outline />
<x-button.circle icon="bookmark" color="secondary" outline />
<x-button.circle icon="bookmark" color="slate" outline />
<x-button.circle icon="bookmark" color="gray" outline />
<x-button.circle icon="bookmark" color="zinc" outline />
<x-button.circle icon="bookmark" color="neutral" outline />
<x-button.circle icon="bookmark" color="stone" outline />
<x-button.circle icon="bookmark" color="red" outline />
<x-button.circle icon="bookmark" color="orange" outline />
<x-button.circle icon="bookmark" color="amber" outline />
<x-button.circle icon="bookmark" color="yellow" outline />
<x-button.circle icon="bookmark" color="lime" outline />
<x-button.circle icon="bookmark" color="green" outline />
<x-button.circle icon="bookmark" color="emerald" outline />
<x-button.circle icon="bookmark" color="teal" outline />
<x-button.circle icon="bookmark" color="cyan" outline />
<x-button.circle icon="bookmark" color="sky" outline />
<x-button.circle icon="bookmark" color="blue" outline />
<x-button.circle icon="bookmark" color="indigo" outline />
<x-button.circle icon="bookmark" color="violet" outline />
<x-button.circle icon="bookmark" color="purple" outline />
<x-button.circle icon="bookmark" color="fuchsia" outline />
<x-button.circle icon="bookmark" color="pink" outline />
<x-button.circle icon="bookmark" color="rose" outline />
<x-button.circle icon="bookmark" color="black" outline />
<x-button.circle icon="bookmark" color="white" outline />

# Flat Variations 

<x-button.circle icon="bookmark" flat />
<x-button.circle icon="bookmark" color="secondary" flat />
<x-button.circle icon="bookmark" color="slate" flat />
<x-button.circle icon="bookmark" color="gray" flat />
<x-button.circle icon="bookmark" color="zinc" flat />
<x-button.circle icon="bookmark" color="neutral" flat />
<x-button.circle icon="bookmark" color="stone" flat />
<x-button.circle icon="bookmark" color="red" flat />
<x-button.circle icon="bookmark" color="orange" flat />
<x-button.circle icon="bookmark" color="amber" flat />
<x-button.circle icon="bookmark" color="yellow" flat />
<x-button.circle icon="bookmark" color="lime" flat />
<x-button.circle icon="bookmark" color="green" flat />
<x-button.circle icon="bookmark" color="emerald" flat />
<x-button.circle icon="bookmark" color="teal" flat />
<x-button.circle icon="bookmark" color="cyan" flat />
<x-button.circle icon="bookmark" color="sky" flat />
<x-button.circle icon="bookmark" color="blue" flat />
<x-button.circle icon="bookmark" color="indigo" flat />
<x-button.circle icon="bookmark" color="violet" flat />
<x-button.circle icon="bookmark" color="purple" flat />
<x-button.circle icon="bookmark" color="fuchsia" flat />
<x-button.circle icon="bookmark" color="pink" flat />
<x-button.circle icon="bookmark" color="rose" flat />
<x-button.circle icon="bookmark" color="black" flat />
<x-button.circle icon="bookmark" color="white" flat />

Code highlighting provided by Torchlight