Solid Variants

BUTTON CODE COPY 
<x-button variant="primary">Primary</x-button>
 
<x-button variant="secondary">Secondary</x-button>
 
<x-button variant="success">Success</x-button>
 
<x-button variant="warning">Warning</x-button>
 
<x-button variant="error">Error</x-button>
 
<x-button variant="sky">Sky</x-button>

Outline Variants

BUTTON CODE COPY 
<x-button variant="outline-primary">Outline Primary</x-button>
 
<x-button variant="outline-secondary">Outline Secondary</x-button>
 
<x-button variant="outline-success">Outline Success</x-button>
 
<x-button variant="outline-warning">Outline Warning</x-button>
 
<x-button variant="outline-error">Outline Error</x-button>
 
<x-button variant="outline-sky">Outline Sky</x-button>

Sizes

BUTTON CODE COPY 
<x-button size="sm" variant="primary">Small</x-button>
 
<x-button variant="primary">Default</x-button>
 
<x-button size="lg" variant="primary">Large</x-button>

States

BUTTON CODE COPY 
<x-button variant="primary">Normal</x-button>
 
<x-button variant="primary" disabled>Disabled</x-button>
 
<x-button variant="primary" loading>Loading</x-button>

Icons - Left

BUTTON CODE COPY 
<x-button variant="primary" icon="save">Save</x-button>
 
<x-button variant="error" icon="trash">Delete</x-button>
 
<x-button variant="success" icon="check">Confirm</x-button>

Icons - Right

BUTTON CODE COPY 
<x-button variant="primary" icon="arrow-right" iconPosition="right">Next</x-button>
 
<x-button variant="success" icon="download" iconPosition="right">Download</x-button>
 
<x-button variant="sky" icon="external-link" iconPosition="right">Open</x-button>

Link Buttons

BUTTON CODE COPY
Go to Dashboard 
<x-button href="/dashboard" variant="primary">Go to Dashboard</x-button>
External Link 
<x-button href="https://example.com" target="_blank" variant="primary">External Link</x-button>
Profile 
<x-button href="/profile" variant="primary" icon="user">Profile</x-button>
Disabled Link 
<x-button href="#" variant="primary" disabled>Disabled Link</x-button>

Documentation

Basic Usage

The Button component can be used as both a button and a link. When `href` is provided, it renders as an anchor tag.

<x-button variant="primary">Click Me</x-button>

Variants

Available variants:

  • primary
  • secondary
  • success
  • warning
  • error
  • sky
  • outline-* (outline-primary, outline-secondary, etc.)

Sizes

Available sizes:

  • sm - Small button
  • default - Default size (no size prop)
  • lg - Large button
<x-button size="sm" variant="primary">Small</x-button>

Icons

Add FontAwesome icons to buttons:

<x-button variant="primary" icon="save">Save</x-button>

Icon position:

  • iconPosition="left" - Default, icon on the left
  • iconPosition="right" - Icon on the right

States

Button states:

  • disabled - Disables the button
  • loading - Shows loading spinner and disables the button
<x-button variant="primary" loading>Loading...</x-button>

Link Support

When `href` is provided, the button renders as an anchor tag:

<x-button href="/dashboard" variant="primary">Go to Dashboard</x-button>

External links:

<x-button href="https://example.com" target="_blank" variant="primary">External Link</x-button>

Button Types

When used as a button (not a link), specify the type:

  • button - Default
  • submit - For form submission
  • reset - For form reset
<x-button type="submit" variant="primary">Submit</x-button>

All Props

size - string|null

Button size: sm, lg, or null for default

variant - string (default: secondary)

Button variant: primary, secondary, success, warning, error, sky, or outline-* variants

disabled - bool (default: false)

Whether the button is disabled

type - string (default: button)

Button type: button, submit, or reset

icon - string|null

FontAwesome icon name (without fa- prefix)

iconPosition - string (default: left)

Icon position: left or right

loading - bool (default: false)

Show loading spinner

href - string|null

If provided, renders as a link instead of button

target - string|null

Link target (e.g., _blank)