Skip to main content
The Button component provides a flexible, accessible button element with extensive customization options including variants, sizes, icons, and loading states.

​
Basic Usage

<flux:button>Click me</flux:button>

​
Variants

Flux buttons come in several visual variants to match different UI contexts: 
<flux:button variant="primary">
    Primary Action
</flux:button>
The primary variant uses your application’s accent color. Perfect for the main call-to-action on a page.

​
Sizes

Buttons support three size variants: 
<flux:button size="xs">Extra Small</flux:button>
<flux:button size="sm">Small</flux:button>
<flux:button size="base">Base (default)</flux:button>

​
Icons

​
Leading Icons

Add an icon to the left side of the button text: 
<flux:button icon="plus">
    Add Item
</flux:button>

<!-- Or use icon:leading -->
<flux:button icon:leading="check">
    Confirm
</flux:button>

​
Trailing Icons

Add an icon to the right side: 
<flux:button icon:trailing="arrow-right">
    Next Step
</flux:button>

​
Icon-Only Buttons

When no text is provided, the button automatically becomes square: 
<flux:button icon="cog" aria-label="Settings" />

​
Icon Variants

Control the icon style independently: 
<flux:button icon="heart" icon:variant="outline">
    Like
</flux:button>

​
Colors

Customize the primary variant with different colors: 
<flux:button variant="primary" color="blue">Blue Button</flux:button>
<flux:button variant="primary" color="green">Green Button</flux:button>
<flux:button variant="primary" color="purple">Purple Button</flux:button>
Available colors: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose.

​
Loading States

Buttons automatically show loading indicators for Livewire actions: 
<!-- Automatic loading for wire:click -->
<flux:button wire:click="save">
    Save
</flux:button>

<!-- Manual loading control -->
<flux:button :loading="$isProcessing">
    Process
</flux:button>

<!-- Disable loading -->
<flux:button wire:click="save" :loading="false">
    Save
</flux:button>
For submit buttons, loading state is shown while the form is processing: 
<flux:button type="submit">
    Submit Form
</flux:button>

​
Keyboard Shortcuts

Display keyboard shortcuts within buttons: 
<flux:button kbd="⌘K">
    Search
</flux:button>

​
Alignment

Control content alignment within the button: 
<flux:button align="start">Left Aligned</flux:button>
<flux:button align="center">Center Aligned</flux:button>
<flux:button align="end">Right Aligned</flux:button>
Buttons automatically render as <a> tags when using the href attribute: 
<flux:button href="/dashboard">
    Go to Dashboard
</flux:button>

​
Disabled State

<flux:button disabled>
    Disabled Button
</flux:button>

​
Inset

Reduce internal padding to align with surrounding content: 
<flux:button inset="left">
    Inset Left
</flux:button>

<flux:button inset="top left">
    Inset Top and Left
</flux:button>

​
Tooltips

Buttons support inline tooltips: 
<flux:button tooltip="This will save your changes">
    Save
</flux:button>

​
Button Groups

Group related buttons together: 
<flux:button.group>
    <flux:button>Left</flux:button>
    <flux:button>Middle</flux:button>
    <flux:button>Right</flux:button>
</flux:button.group>

​
Props Reference

PropTypeDefaultDescription
variantstringoutlineVisual style: primary, outline, filled, ghost, subtle, danger
sizestringbaseButton size: xs, sm, base
iconstring-Leading icon name
icon:leadingstring-Leading icon name (alternative)
icon:trailingstring-Trailing icon name
icon:variantstringmicroIcon variant: mini, micro, outline
colorstring-Color for primary variant
typestringbuttonButton type: button, submit, reset
loadingbooleanautoShow loading indicator
squarebooleanautoForce square shape
kbdstring-Keyboard shortcut to display
alignstringcenterContent alignment: start, center, end
insetstring-Reduce padding: top, right, bottom, left or combinations
hrefstring-URL to link to (renders as <a>)
disabledbooleanfalseDisable the button

​
Accessibility

  • Buttons include proper type attributes
  • Icon-only buttons should include aria-label
  • Disabled buttons are not keyboard accessible
  • Loading states announce to screen readers
When using wire:click with parameters, the loading indicator is automatically scoped to that specific action to prevent multiple buttons from showing loading states simultaneously.

Build docs developers (and LLMs) love

Get started for freeTalk to us