There are still dozens of new things to be done in 2025 in TallStackUI v2. Stay tuned for every release!

Powerful suite of Blade components for TALL Stack apps.

Button

Button component.

# Basic Usage 

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

By default, the button type is button , but you can set this as submit by using the submit attribute. The same attribute is also valid for the button.circle component mentioned below. 

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

# 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>

You can use the position attribute to define the position of the loading icon: left or right .

# 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" />

# 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 />

# 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="Black" color="black" 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 />
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" />

# 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 />

# 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 />

# 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 />

Code highlighting provided by Torchlight