Button components - Tallcraftui

# Basic usage

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

# Outline buttons

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

# Flat buttons

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

# Button as link

Link Link External link

<x-button label="Link" :link="route('docs.components.button')" />
<x-button label="Link" :link="route('docs.components.button')" no-wire-navigate />
<x-button label="External link" link="https://laravel.com" external />

# Size variants

<x-button label="Button" sm />
<x-button label="Button" md /> {{-- default --}}
<x-button label="Button" lg />
<x-button label="Button" xl />
<x-button label="Button" 2xl />

# Rounded corner

<x-button label="Rounded none" rounded-none />
<x-button label="Rounded sm" rounded-sm />
<x-button label="Rounded Default" />
<x-button label="Rounded md" rounded-md />
<x-button label="Rounded lg" rounded-lg />
<x-button label="Rounded xl" rounded-xl />
<x-button label="Rounded 2xl" rounded-2xl />
<x-button label="Rounded 3xl" rounded-3xl />
<x-button label="Rounded full" rounded-full />

# Button with icon

<x-button label="Home" icon="home" purple />
<x-button label="Delete" icon="trash" red />
<x-button label="View" icon="eye" gray />
<x-button label="Edit" icon="pencil-square" amber />
<x-button label="Save" icon="bookmark-square" green />
 
<x-button label="Home" icon="home" purple outline />
<x-button label="Delete" icon="trash" red outline />
<x-button label="View" icon="eye" gray outline />
<x-button label="Edit" icon="pencil-square" amber outline />
<x-button label="Save" icon="bookmark-square" green outline />
 
<x-button label="Home" icon="home" purple flat />
<x-button label="Delete" icon="trash" red flat />
<x-button label="View" icon="eye" gray flat />
<x-button label="Edit" icon="pencil-square" amber flat />
<x-button label="Save" icon="bookmark-square" green flat />

# Circle buttons

<x-button icon="home" purple circle />
<x-button icon="trash" red circle />
<x-button icon="eye" gray circle />
<x-button icon="pencil-square" amber circle />
<x-button icon="bookmark-square" green circle />
<x-button icon="archive-box-x-mark" rose circle />
<x-button icon="bars-3" gray circle />
<x-button icon="bell" blue circle />
<x-button icon="chat-bubble-left-ellipsis" fuschsia circle />

# Circle buttons - outline

<x-button icon="home" purple outline circle />
<x-button icon="trash" red outline circle />
<x-button icon="eye" gray outline circle />
<x-button icon="pencil-square" amber outline circle />
<x-button icon="bookmark-square" green outline circle />
<x-button icon="archive-box-x-mark" rose outline circle />
<x-button icon="bars-3" gray outline circle />
<x-button icon="bell" blue outline circle />
<x-button icon="chat-bubble-left-ellipsis" fuschsia outline circle />

# Circle buttons - flat

<x-button icon="home" purple flat circle />
<x-button icon="trash" red flat circle />
<x-button icon="eye" gray flat circle />
<x-button icon="pencil-square" amber flat circle />
<x-button icon="bookmark-square" green flat circle />
<x-button icon="archive-box-x-mark" rose flat circle />
<x-button icon="bars-3" gray flat circle />
<x-button icon="bell" blue flat circle />
<x-button icon="chat-bubble-left-ellipsis" fuschsia flat circle />

# With spinner

Add loading indicators to your buttons with the spinner attribute. For standalone buttons, simply add the spinner attribute to display a loading state during wire:click actions. In forms, you can specify which action triggers the spinner by passing the action name to the spinner attribute - this automatically shows the loading state during form submission.

<x-button wire:click="delete" label="Delete" spinner />
 
<form wire:submit="create">
    <x-button label="submit" spinner="create" />
</form>