WireUI
WireUI
Buttons

The button component has multiple styles and options to customize. A simple API to use button component with icons and any colors

Default Colors 
 1<x-button label="Default" />
 2<x-button primary label="Primary" />
 3<x-button secondary label="Secondary" />
 4<x-button positive label="Positive" />
 5<x-button negative label="Negative" />
 6<x-button warning label="Warning" />
 7<x-button info label="Info" />
 8<x-button dark label="Dark" />
 9<x-button white label="White" />
10<x-button black label="Black" />
11<x-button slate label="Slate" />
12<x-button gray label="Gray" />
13<x-button zinc label="Zinc" />
14<x-button neutral label="Neutral" />
15<x-button stone label="Stone" />
16<x-button red label="Red" />
17<x-button orange label="Orange" />
18<x-button amber label="Amber" />
19<x-button lime label="Lime" />
20<x-button green label="Green" />
21<x-button emerald label="Emerald" />
22<x-button teal label="Teal" />
23<x-button cyan label="Cyan" />
24<x-button sky label="Sky" />
25<x-button blue label="Blue" />
26<x-button indigo label="Indigo" />
27<x-button violet label="Violet" />
28<x-button purple label="Purple" />
29<x-button fuchsia label="Fuchsia" />
30<x-button pink label="Pink" />
31<x-button rose label="Rose" />
Outline Colors 
 1<x-button outline label="Default" />
 2<x-button outline primary label="Primary" />
 3<x-button outline secondary label="Secondary" />
 4<x-button outline positive label="Positive" />
 5<x-button outline negative label="Negative" />
 6<x-button outline warning label="Warning" />
 7<x-button outline info label="Info" />
 8<x-button outline dark label="Dark" />
 9<x-button outline white label="White" />
10<x-button outline black label="Black" />
11<x-button outline slate label="Slate" />
12<x-button outline gray label="Gray" />
13<x-button outline zinc label="Zinc" />
14<x-button outline neutral label="Neutral" />
15<x-button outline stone label="Stone" />
16<x-button outline red label="Red" />
17<x-button outline orange label="Orange" />
18<x-button outline amber label="Amber" />
19<x-button outline lime label="Lime" />
20<x-button outline green label="Green" />
21<x-button outline emerald label="Emerald" />
22<x-button outline teal label="Teal" />
23<x-button outline cyan label="Cyan" />
24<x-button outline sky label="Sky" />
25<x-button outline blue label="Blue" />
26<x-button outline indigo label="Indigo" />
27<x-button outline violet label="Violet" />
28<x-button outline purple label="Purple" />
29<x-button outline fuchsia label="Fuchsia" />
30<x-button outline pink label="Pink" />
31<x-button outline rose label="Rose" />
Flat Colors 
 1<x-button flat label="Default" />
 2<x-button flat primary label="Primary" />
 3<x-button flat secondary label="Secondary" />
 4<x-button flat positive label="Positive" />
 5<x-button flat negative label="Negative" />
 6<x-button flat warning label="Warning" />
 7<x-button flat info label="Info" />
 8<x-button flat dark label="Dark" />
 9<x-button flat white label="White" />
10<x-button flat black label="Black" />
11<x-button flat slate label="Slate" />
12<x-button flat gray label="Gray" />
13<x-button flat zinc label="Zinc" />
14<x-button flat neutral label="Neutral" />
15<x-button flat stone label="Stone" />
16<x-button flat red label="Red" />
17<x-button flat orange label="Orange" />
18<x-button flat amber label="Amber" />
19<x-button flat lime label="Lime" />
20<x-button flat green label="Green" />
21<x-button flat emerald label="Emerald" />
22<x-button flat teal label="Teal" />
23<x-button flat cyan label="Cyan" />
24<x-button flat sky label="Sky" />
25<x-button flat blue label="Blue" />
26<x-button flat indigo label="Indigo" />
27<x-button flat violet label="Violet" />
28<x-button flat purple label="Purple" />
29<x-button flat fuchsia label="Fuchsia" />
30<x-button flat pink label="Pink" />
31<x-button flat rose label="Rose" />
Rounded Button 
1<x-button rounded label="No Color" />
2<x-button rounded primary label="Primary" />
3<x-button rounded secondary label="Secondary" />
4<x-button rounded positive label="Positive" />
5<x-button rounded negative label="Negative" />
6<x-button rounded warning label="Warning" />
7<x-button rounded info label="Info" />
8<x-button rounded dark label="Dark" />
Squared Button 
1<x-button squared label="No Color" />
2<x-button squared primary label="Primary" />
3<x-button squared secondary label="Secondary" />
4<x-button squared positive label="Positive" />
5<x-button squared negative label="Negative" />
6<x-button squared warning label="Warning" />
7<x-button squared info label="Info" />
8<x-button squared dark label="Dark" />
Circle Buttons 
 1<x-button.circle icon="home" />
 2<x-button.circle primary icon="pencil" />
 3<x-button.circle secondary icon="clipboard-list"  />
 4<x-button.circle positive icon="check" />
 5<x-button.circle negative icon="x" />
 6<x-button.circle warning icon="exclamation" />
 7<x-button.circle info icon="information-circle" />
 8<x-button.circle dark icon="ban" />
 9<x-button.circle secondary label="A"  />
10<x-button.circle positive label="B" />
11<x-button.circle negative label="C" />
12<x-button.circle primary label="+" />
Button With Icons 
1<x-button icon="home" label="Default" />
2<x-button icon="pencil" primary label="Primary" />
3<x-button icon="clipboard-list" secondary label="Secondary" />
4<x-button icon="check" positive label="Positive" />
5<x-button icon="x" negative label="Negative" />
6<x-button icon="exclamation" warning label="Warning" />
7<x-button right-icon="information-circle" info label="Info" />
8<x-button right-icon="ban" dark label="Dark" />
Button Sizes 
1<x-button xs icon="pencil" primary label="Extra Small Button" />
2<x-button sm icon="users" dark label="Small Button" />
3<x-button icon="clipboard-list" secondary label="Normal" />
4<x-button md icon="check" positive label="Medium Button" />
5<x-button lg icon="x" negative label="Large Button" />
You can show a spinner loading when an action if fired.
You can pass wire:target value into spinner prop. If no value is given, all loading effects will be applied.
Loading Spinner 
1<x-button.circle wire:click="save" teal icon="check" spinner />
2<x-button wire:click="save" spinner primary label="Save without target" />
3<x-button wire:click="save" spinner="save" primary label="Save with target" />
4<x-button wire:click="save" spinner="save" loading-delay="short" primary label="Save with target + delay indicator" />

The attributes [squared, rounded, right-icon] are not supported in the button.circle component

Button Options

Options

Prop Required Default Type Available
2xs false false boolean boolean
xs false false boolean boolean
sm false false boolean boolean
md false false boolean boolean
lg false false boolean boolean
xl false false boolean boolean
size false default string 2xs|xs|sm|default|md|lg|xl
primary false false boolean boolean
secondary false false boolean boolean
positive false false boolean boolean
negative false false boolean boolean
warning false false boolean boolean
info false false boolean boolean
dark false false boolean boolean
white false false boolean boolean
black false false boolean boolean
slate false false boolean boolean
gray false false boolean boolean
zinc false false boolean boolean
neutral false false boolean boolean
stone false false boolean boolean
red false false boolean boolean
orange false false boolean boolean
amber false false boolean boolean
lime false false boolean boolean
green false false boolean boolean
emerald false false boolean boolean
teal false false boolean boolean
cyan false false boolean boolean
sky false false boolean boolean
blue false false boolean boolean
indigo false false boolean boolean
violet false false boolean boolean
purple false false boolean boolean
fuchsia false false boolean boolean
pink false false boolean boolean
rose false false boolean boolean
color false null string default colors + all tailwind colors
rounded false false boolean boolean
squared false false boolean boolean
flat false false boolean boolean
full false false boolean boolean
label false null string *
icon false null string all heroicons
rightIcon false null string all heroicons
spinner false null boolean|string *
href false null string all links
loadingDelay false null string shortest|shorter|short|long|longer|longest
🪁 Playground 
1<x-button label="Button" />