The button component is a powerful tool that opens up a world of possibilities for customization. With multiple variants, a rich palette of colors, and a straightforward API, it empowers you to enhance your application with beautiful and functional components. Whether you're looking to create eye-catching call-to-action buttons, subtle navigation links, or interactive elements, the button component gives you the control and versatility you need to make your application stand out. Additionally, you can easily add loading indicators for specific actions and fine-tune their timing, making it a comprehensive solution for creating an engaging user experience.
We offer an extensive range of solid colors to allow you to customize your application to your liking.
1<div class="flex flex-wrap items-center justify-center gap-4 mb-4"> 2 <x-button label="Default" /> 3 <x-button black label="Black" /> 4 <x-button white label="White" /> 5</div> 6<div class="grid grid-cols-2 gap-4 sm:grid-cols-4 xl:grid-cols-6"> 7 <x-button primary label="Primary" /> 8 <x-button secondary label="Secondary" /> 9 <x-button positive label="Positive" />10 <x-button negative label="Negative" />11 <x-button warning label="Warning" />12 <x-button info label="Info" />13 <x-button slate label="Slate" />14 <x-button gray label="Gray" />15 <x-button zinc label="Zinc" />16 <x-button neutral label="Neutral" />17 <x-button stone label="Stone" />18 <x-button red label="Red" />19 <x-button yellow label="Yellow" />20 <x-button amber label="Amber" />21 <x-button orange label="Orange" />22 <x-button lime label="Lime" />23 <x-button green label="Green" />24 <x-button emerald label="Emerald" />25 <x-button teal label="Teal" />26 <x-button cyan label="Cyan" />27 <x-button sky label="Sky" />28 <x-button blue label="Blue" />29 <x-button indigo label="Indigo" />30 <x-button violet label="Violet" />31 <x-button purple label="Purple" />32 <x-button fuchsia label="Fuchsia" />33 <x-button pink label="Pink" />34 <x-button rose label="Rose" />35</div>In version 2, we've introduced a new light variant, which presents a unique model for rendering your button, utilizing Tailwind's extensive color palette.
1<div class="flex flex-wrap items-center justify-center gap-4 mb-4"> 2 <x-button light label="Default" /> 3 <x-button light black label="Black" /> 4 <x-button light white label="White" /> 5</div> 6<div class="grid grid-cols-2 gap-4 sm:grid-cols-4 xl:grid-cols-6"> 7 <x-button light primary label="Primary" /> 8 <x-button light secondary label="Secondary" /> 9 <x-button light positive label="Positive" />10 <x-button light negative label="Negative" />11 <x-button light warning label="Warning" />12 <x-button light info label="Info" />13 <x-button light slate label="Slate" />14 <x-button light gray label="Gray" />15 <x-button light zinc label="Zinc" />16 <x-button light neutral label="Neutral" />17 <x-button light stone label="Stone" />18 <x-button light red label="Red" />19 <x-button light yellow label="Yellow" />20 <x-button light amber label="Amber" />21 <x-button light orange label="Orange" />22 <x-button light lime label="Lime" />23 <x-button light green label="Green" />24 <x-button light emerald label="Emerald" />25 <x-button light teal label="Teal" />26 <x-button light cyan label="Cyan" />27 <x-button light sky label="Sky" />28 <x-button light blue label="Blue" />29 <x-button light indigo label="Indigo" />30 <x-button light violet label="Violet" />31 <x-button light purple label="Purple" />32 <x-button light fuchsia label="Fuchsia" />33 <x-button light pink label="Pink" />34 <x-button light rose label="Rose" />35</div>We also provide this array of colors for the outline variant.
1<div class="flex flex-wrap items-center justify-center gap-4 mb-4"> 2 <x-button outline label="Default" /> 3 <x-button outline black label="Black" /> 4 <x-button outline white label="White" /> 5</div> 6<div class="grid grid-cols-2 gap-4 sm:grid-cols-4 xl:grid-cols-6 bg-red-500pr-4"> 7 <x-button outline primary label="Primary" /> 8 <x-button outline secondary label="Secondary" /> 9 <x-button outline positive label="Positive" />10 <x-button outline negative label="Negative" />11 <x-button outline warning label="Warning" />12 <x-button outline info label="Info" />13 <x-button outline slate label="Slate" />14 <x-button outline gray label="Gray" />15 <x-button outline zinc label="Zinc" />16 <x-button outline neutral label="Neutral" />17 <x-button outline stone label="Stone" />18 <x-button outline red label="Red" />19 <x-button outline yellow label="Yellow" />20 <x-button outline amber label="Amber" />21 <x-button outline orange label="Orange" />22 <x-button outline lime label="Lime" />23 <x-button outline green label="Green" />24 <x-button outline emerald label="Emerald" />25 <x-button outline teal label="Teal" />26 <x-button outline cyan label="Cyan" />27 <x-button outline sky label="Sky" />28 <x-button outline blue label="Blue" />29 <x-button outline indigo label="Indigo" />30 <x-button outline violet label="Violet" />31 <x-button outline purple label="Purple" />32 <x-button outline fuchsia label="Fuchsia" />33 <x-button outline pink label="Pink" />34 <x-button outline rose label="Rose" />35</div>We offer a diverse selection of colors for the flat variant as well.
1<div class="flex flex-wrap items-center justify-center gap-4 mb-4"> 2 <x-button flat label="Default" /> 3 <x-button flat black label="Black" /> 4 <x-button flat white label="White" /> 5</div> 6<div class="grid grid-cols-2 gap-4 sm:grid-cols-4 xl:grid-cols-6"> 7 <x-button flat primary label="Primary" /> 8 <x-button flat secondary label="Secondary" /> 9 <x-button flat positive label="Positive" />10 <x-button flat negative label="Negative" />11 <x-button flat warning label="Warning" />12 <x-button flat info label="Info" />13 <x-button flat slate label="Slate" />14 <x-button flat gray label="Gray" />15 <x-button flat zinc label="Zinc" />16 <x-button flat neutral label="Neutral" />17 <x-button flat stone label="Stone" />18 <x-button flat red label="Red" />19 <x-button flat yellow label="Yellow" />20 <x-button flat amber label="Amber" />21 <x-button flat orange label="Orange" />22 <x-button flat lime label="Lime" />23 <x-button flat green label="Green" />24 <x-button flat emerald label="Emerald" />25 <x-button flat teal label="Teal" />26 <x-button flat cyan label="Cyan" />27 <x-button flat sky label="Sky" />28 <x-button flat blue label="Blue" />29 <x-button flat indigo label="Indigo" />30 <x-button flat violet label="Violet" />31 <x-button flat purple label="Purple" />32 <x-button flat fuchsia label="Fuchsia" />33 <x-button flat pink label="Pink" />34 <x-button flat rose label="Rose" />35</div>One notable feature of WireUI within buttons is the ability to assign distinct colors and variants to various states of the button. This empowers you with even more extensive customization options.
1<x-button label="Delete" right-icon="trash" interaction="negative" /> 2 3<x-button label="Save" right-icon="check" flat interaction:solid="positive" /> 4 5<x-button label="Cancel" right-icon="trash" outline hover="warning" focus:solid.gray /> 6 7<x-mini-button rounded icon="trash" flat gray interaction="negative" /> 8 9<x-mini-button rounded icon="plus" flat primary interaction:solid />10 11<x-mini-button rounded icon="bookmark" flat gray hover:outline.negative focus:solid.positive />
Occasionally, you may wish to modify the button's style as the user interacts with it. For instance, when the
user hovers over the button, you might want to transition its color to a different shade.
This can be accomplished by leveraging the hover, focus, and interaction attributes.
Effects:
- hover: when the mouse is over the button.
- focus: when the button is focused or clicked.
- interaction: hover and focus effects.
Syntax:
{effect}="{color}" - keep the current variant, but change the color{effect}:{variant} - keep the current color, but change the variant{effect}:{variant}="{color}" - change bothCustomizing button rounding now grants you access to the full spectrum of Tailwind options, providing the flexibility for additional personalization in accordance with your preferences.
1{{-- CSS: 'rounded-none' - You can use |rounded="none"| too --}} 2<x-button squared label="No Color" /> 3 4{{-- CSS: 'rounded-sm' --}} 5<x-button rounded="sm" primary label="Primary" /> 6 7{{-- CSS: 'rounded' - DEFAULT --}} 8<x-button rounded="base" secondary label="Secondary" /> 9 10{{-- CSS: 'rounded-md' --}}11<x-button rounded="md" positive label="Positive" />12 13{{-- CSS: 'rounded-lg' --}}14<x-button rounded="lg" negative label="Negative" />15 16{{-- CSS: 'rounded-xl' --}}17<x-button rounded="xl" warning label="Warning" />18 19{{-- CSS: 'rounded-2xl' --}}20<x-button rounded="2xl" info label="Info" />21 22{{-- CSS: 'rounded-3xl' --}}23<x-button rounded="3xl" dark label="Dark" />24 25{{-- CSS: 'rounded-full' - You can use |rounded| too --}}26<x-button rounded="full" pink label="Pink" />27 28{{-- Or Custom --}}29<x-button rounded="rounded-[1.25rem]" red label="Red" />Diverging from version 1, we've introduced the mini-button, which provides a wide array of customization possibilities, especially when it comes to rounding. In version 1, the sole available choice was the button.circle.
1<x-mini-button rounded icon="home" /> 2<x-mini-button squared primary icon="pencil" /> 3<x-mini-button secondary icon="clipboard" /> 4<x-mini-button rounded positive icon="check" /> 5<x-mini-button rounded negative icon="x-mark" /> 6<x-mini-button rounded warning icon="exclamation-triangle" /> 7<x-mini-button rounded info icon="information-circle" /> 8<x-mini-button rounded secondary label="A" /> 9<x-mini-button rounded positive label="B" />10<x-mini-button rounded negative label="C" />11<x-mini-button rounded primary label="+" />When it comes to size, our button component offers a diverse range of options designed to accommodate various scenarios.
1<x-button 2xs secondary label="Secondary" /> 2 3<x-button xs primary label="Primary" /> 4 5<x-button sm positive label="Positive" /> 6 7{{-- You can use |size="md"| too - DEFAULT --}} 8<x-button md negative label="Negative" /> 9 10<x-button lg warning label="Warning" />11 12<x-button xl stone label="Stone" />13 14<x-button 2xl black label="Black" />Additionally, you have the option to choose an icon for the left side of the label and a right-icon, positioned on the right side of the label, as the name suggests. Moreover, you can customize the size of these icons to suit your preferences.
1<x-button icon="home" label="Default" />2<x-button icon="pencil" primary label="Primary" />3<x-button icon="clipboard" secondary label="Secondary" />4<x-button icon="arrow-left" right-icon="arrow-right" positive label="Positive" />5<x-button right-icon="x-mark" negative label="Negative" />6<x-button right-icon="exclamation-triangle" warning label="Warning" />You can use the button as a link by simply including the href attribute, and it will automatically render as a link.
1<x-button href="https://google.com?ref={{ config('app.url') }}" target="_blank" label="Go to Google"2 teal />3 4<x-mini-button href="https://github.com/PH7-Jack?ref={{ config('app.url') }}" target="_blank" rounded5 black>6 <x-svg.github class="w-4 h-4 fill-white" />7</x-mini-button>Another notable advantage of our button is the ability to incorporate a loading indicator for specific actions, giving you the flexibility to customize the delay and display duration.
1<x-mini-button rounded wire:click="$refresh" teal icon="check" spinner /> 2 3 <x-mini-button rounded wire:click="sleeping" teal icon="check" spinner.longest /> 4 5 <x-button wire:click="$refresh" spinner primary label="Without target" /> 6 7 <x-button wire:click="sleeping" spinner="sleeping" primary label="With target" /> 8 9 <x-button wire:click="sleeping" spinner.longest="sleeping" primary10label="With target + delay modifier" />11 12 <x-button wire:click="sleeping" spinner.longest="sleeping" right-icon="x-mark" primary13label="With target + delay modifier" />