Button
Buttons are a staple of all user interfaces.
<x-button label="Click me!"/>
<x-button class="btn-primary" icon="heroicon-o-chat-bubble-left">
Button with primary style
</x-button>
<x-button class="btn-info" trail-icon="heroicon-o-bell-alert">
Button with info style
</x-button>
#Styling
#Color
Use the color={neutral|primary|secondary|accent|info|success|warning|error} and variant={soft|outline|dash|ghost|gradient} (variant="gradient" is a FlyonUI-only option) attributes to tweak the appearance of buttons.
<!-- Default color -->
<x-button label="Default"/>
<x-button label="Soft, default" variant="soft"/>
<x-button label="Outline, default" variant="outline"/>
<x-button label="Dash, default" variant="dash"/>
<x-button label="Ghost, default" variant="ghost"/>
<x-button label="Grad., default" variant="gradient"/>
<!-- Neutral color -->
<x-button color="neutral" label="Neutral"/>
<x-button color="neutral" label="Soft, neutral" variant="soft"/>
<x-button color="neutral" label="Outline, neutral" variant="outline"/>
<x-button color="neutral" label="Dash, neutral" variant="dash"/>
<x-button color="neutral" label="Ghost, neutral" variant="ghost"/>
<x-button color="neutral" label="Grad., neutral" variant="gradient"/>
<!-- Primary color -->
<x-button color="primary" label="Primary"/>
<x-button color="primary" label="Soft, primary" variant="soft"/>
<x-button color="primary" label="Outline, primary" variant="outline"/>
<x-button color="primary" label="Dash, primary" variant="dash"/>
<x-button color="primary" label="Ghost, primary" variant="ghost"/>
<x-button color="primary" label="Grad., primary" variant="gradient"/>
<!-- Secondary color -->
<x-button color="secondary" label="Secondary"/>
<x-button color="secondary" label="Soft, scndary" variant="soft"/>
<x-button color="secondary" label="Outline, scndary" variant="outline"/>
<x-button color="secondary" label="Dash, scndary" variant="dash"/>
<x-button color="secondary" label="Ghost, scndary" variant="ghost"/>
<x-button color="secondary" label="Grad., scndary" variant="gradient"/>
<!-- Accent color -->
<x-button color="accent" label="Accent"/>
<x-button color="accent" label="Soft, accent" variant="soft"/>
<x-button color="accent" label="Outline, accent" variant="outline"/>
<x-button color="accent" label="Dash, accent" variant="dash"/>
<x-button color="accent" label="Ghost, accent" variant="ghost"/>
<x-button color="accent" label="Grad., accent" variant="gradient"/>
<!-- Info color -->
<x-button color="info" label="Info"/>
<x-button color="info" label="Soft, info" variant="soft"/>
<x-button color="info" label="Outline, info" variant="outline"/>
<x-button color="info" label="Dash, info" variant="dash"/>
<x-button color="info" label="Ghost, info" variant="ghost"/>
<x-button color="info" label="Grad., info" variant="gradient"/>
<!-- Success color -->
<x-button color="success" label="Success"/>
<x-button color="success" label="Soft, success" variant="soft"/>
<x-button color="success" label="Outline, success" variant="outline"/>
<x-button color="success" label="Dash, success" variant="dash"/>
<x-button color="success" label="Ghost, success" variant="ghost"/>
<x-button color="success" label="Grad., success" variant="gradient"/>
<!-- Warning color -->
<x-button color="warning" label="Warning"/>
<x-button color="warning" label="Soft, warning" variant="soft"/>
<x-button color="warning" label="Outline, warning" variant="outline"/>
<x-button color="warning" label="Dash, warning" variant="dash"/>
<x-button color="warning" label="Ghost, warning" variant="ghost"/>
<x-button color="warning" label="Grad., warning" variant="gradient"/>
<!-- Error color -->
<x-button color="error" label="Error"/>
<x-button color="error" label="Soft, error" variant="soft"/>
<x-button color="error" label="Outline, error" variant="outline"/>
<x-button color="error" label="Dash, error" variant="dash"/>
<x-button color="error" label="Ghost, error" variant="ghost"/>
<x-button color="error" label="Grad., error" variant="gradient"/>
#Size
Like most controls, 5 sizes are available for buttons.
<x-button size="xl" label="Extra large"/>
<x-button size="lg" label="Large"/>
<x-button size="md" label="Medium"/>
<x-button size="sm" label="Small"/>
<x-button size="xs" label="Tiny"/>
#Icon
Use the icon attribute/slot to add an icon to the button.
If you want the icon placed to the right of the button, use trail-icon instead.
<x-button label="Icon on the left" icon="heroicon-o-heart"/>
<x-button label="Icon on the right" trail-icon="heroicon-o-finger-print"/>
#Link
The href attribute transforms the button into a link that looks like a button.
The below button is such a link, and it preloads the target page with wire:navigate:hover.
<x-button label="Return to the homepage" href="/" wire:navigate.hover/>
#Loading indicator
A loading indicator will be displayed automatically for buttons that have the data-loading attribute set on them, that Livewire automatically adds when it sends a request to the server.
A loading indicator suddenly appearing often causes the button to resize, and text and other controls to move, but there exist 3 ways to mitigate this:
Align the button to the right of its parent with empty space on its right.
The indicator appearing on the left will resize the button, yes, but nothing will move as a result, including the text of the button itself.Use the
indicator-endattribute to place the indicator to the right of the button, with empty space on its left.
This is the symmetrical configuration.Add an icon to the button so that the width it takes on the button is recycled by the indicator.
Doing that allows the indicator to appear without moving anything.
Use loading-indicator="0" if you want to create buttons without a loading indicator.
Livewire makes it unnecessary to add any code to your buttons, since it automatically adds the attribute whenever a request is being processed by the server.
If you want to add a loading indicator without Livewire, the below examples show the required extra code to achieve this, in this case, using Alpine.
<x-button
class="place-self-end"
data-loading
label="Permanent indicator"
/>
<x-button
class="place-self-start"
x-data="{ working:false }"
x-bind:data-loading="working ? '' : null"
@click="working = true; setTimeout((() => working = false), 2000);"
label="Do something"
/>
<x-button
class="place-self-end"
x-data="{ working:false }"
x-bind:data-loading="working ? '' : null"
@click="working = true; setTimeout((() => working = false), 2000);"
load-indicator="bars"
label="Bars indicator"
/>
<x-button
class="place-self-start"
indicator-end
x-data="{ working:false }"
x-bind:data-loading="working ? '' : null"
@click="working = true; setTimeout((() => working = false), 2000);"
label="Spinner placed after the text"
/>
<x-button
class="place-self-end"
icon="heroicon-o-lock-open"
x-data="{ working:false }"
x-bind:data-loading="working ? '' : null"
@click="working = true; setTimeout((() => working = false), 2000);"
label="Login"
/>
<x-button
class="place-self-start"
indicator-end
trail-icon="heroicon-o-heart"
x-data="{ working:false }"
x-bind:data-loading="working ? '' : null"
@click="working = true; setTimeout((() => working = false), 2000);"
label="Like"
/>
<x-button
class="place-self-end"
load-indicator="0"
x-data="{ working:false }"
x-bind:data-loading="working ? '' : null"
@click="working = true; setTimeout((() => working = false), 2000);"
label="Button with no spinner"
/>