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

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 v4.

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

# Block

An option to expand the button to full width.

<x-button block>TallStackUI</x-button>

# 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="Mauve" color="mauve" />
<x-button text="Olive" color="olive" />
<x-button text="Mist" color="mist" />
<x-button text="Taupe" color="taupe" />
<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="Mauve" color="mauve" light />
<x-button text="Olive" color="olive" light />
<x-button text="Mist" color="mist" light />
<x-button text="Taupe" color="taupe" 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="Mauve" color="mauve" outline />
<x-button text="Olive" color="olive" outline />
<x-button text="Mist" color="mist" outline />
<x-button text="Taupe" color="taupe" 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="Mauve" color="mauve" flat />
<x-button text="Olive" color="olive" flat />
<x-button text="Mist" color="mist" flat />
<x-button text="Taupe" color="taupe" flat />
<x-button text="Black" color="black" flat />

# Unfocus

Suppresses the focus halo when the button is activated by mouse.

<x-button text="With Focus" />
<x-button text="Without Focus" unfocus />
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="mauve" />
<x-button.circle icon="bookmark" color="olive" />
<x-button.circle icon="bookmark" color="mist" />
<x-button.circle icon="bookmark" color="taupe" />
<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="mauve" light />
<x-button.circle icon="bookmark" color="olive" light />
<x-button.circle icon="bookmark" color="mist" light />
<x-button.circle icon="bookmark" color="taupe" 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="mauve" outline />
<x-button.circle icon="bookmark" color="olive" outline />
<x-button.circle icon="bookmark" color="mist" outline />
<x-button.circle icon="bookmark" color="taupe" 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="mauve" flat />
<x-button.circle icon="bookmark" color="olive" flat />
<x-button.circle icon="bookmark" color="mist" flat />
<x-button.circle icon="bookmark" color="taupe" flat />
<x-button.circle icon="bookmark" color="black" flat />

# Unfocus

Same focus-suppression behaviour as on the regular button.

<x-button.circle icon="x-mark" color="secondary" sm />
<x-button.circle icon="x-mark" color="secondary" sm unfocus />
Group

# Concept

x-button.group is a purely visual wrapper that segments one or more x-button siblings into a single cohesive unit: adjacent borders collapse into shared dividers, only the outer corners are rounded, and focus rings are isolated so the focused child sits above its neighbours. The wrapper renders role="group" and forwards arbitrary attributes (e.g. aria-label , id , class ) to the underlying element.

The group is stateless: there is no selected state, no wire:model , and no propagation of size , color or style to the children. Each grouped x-button keeps full control over its own appearance and behaviour.

# Basic Usage 

<x-button.group>
    <x-button text="Years" color="secondary" />
    <x-button text="Months" color="secondary" />
    <x-button text="Days" color="secondary" />
</x-button.group>

# Vertical Orientation 

<x-button.group vertical>
    <x-button text="List" icon="bars-4" color="secondary" />
    <x-button text="Grid" icon="squares-2x2" color="secondary" />
    <x-button text="Map" icon="map" color="secondary" />
</x-button.group>

Code highlighting provided by Torchlight