Skip to content

Overview

The Button component provides a versatile interactive element that can render as a <button> or <a> tag. It supports multiple visual variants following the Aura UI "Vibrant Depth" design language (including gradient mode), icon placement on both sides, a loading spinner state, and automatic disabled handling.

Use buttons for:

  • Form submissions
  • Action triggers
  • Navigation links (via href prop)
  • Toolbar actions

Basic Usage

<x-aura::button>Click Me</x-aura::button>

Props

Prop Type Default Description
variant string 'primary' Visual style: primary, secondary, outline, ghost, danger, link
size string 'md' Size: xs, sm, md, lg, xl
outline bool false Outline style (overrides variant fill)
gradient bool false Gradient background effect
loading bool false Show spinner and disable interaction
disabled bool false Disable the button
icon string|null null Icon name on the left side
iconRight string|null null Icon name on the right side
iconOnly bool false Icon-only mode (hides text, adjusts padding)
href string|null null When set, renders as <a> tag instead of <button>
type string 'button' HTML button type: button, submit, reset

Variants/Examples

Variant Showcase

<x-aura::button variant="primary">Primary</x-aura::button>
<x-aura::button variant="secondary">Secondary</x-aura::button>
<x-aura::button variant="success">Success</x-aura::button>
<x-aura::button variant="warning">Warning</x-aura::button>
<x-aura::button variant="danger">Danger</x-aura::button>
<x-aura::button variant="ghost">Ghost</x-aura::button>
<x-aura::button variant="link">Link</x-aura::button>

Outline Variants

<x-aura::button variant="primary" outline>Primary</x-aura::button>
<x-aura::button variant="secondary" outline>Secondary</x-aura::button>
<x-aura::button variant="success" outline>Success</x-aura::button>
<x-aura::button variant="warning" outline>Warning</x-aura::button>
<x-aura::button variant="danger" outline>Danger</x-aura::button>

Gradient Button

<x-aura::button variant="primary" gradient>
    Get Started
</x-aura::button>

With Icons

<x-aura::button icon="plus">Add Item</x-aura::button>

<x-aura::button icon="download" iconRight="arrow-right">
    Download Report
</x-aura::button>

Icon-Only Button

<x-aura::button icon="settings" iconOnly aria-label="Settings" />
<x-aura::button icon="trash" iconOnly variant="danger" aria-label="Delete" />

Loading State

<x-aura::button loading>Processing...</x-aura::button>

{{-- With Livewire --}}
<x-aura::button
    type="submit"
    wire:loading.attr="disabled"
    :loading="false"
>
    Save
</x-aura::button>

When href is provided, the component renders an <a> tag with button styling.

Go to Dashboard Visit Website 
<x-aura::button href="/dashboard" variant="primary">
    Go to Dashboard
</x-aura::button>

<x-aura::button href="https://example.com" target="_blank" icon="external-link">
    Visit Website
</x-aura::button>

Size Comparison

<x-aura::button size="xs">Extra Small</x-aura::button>
<x-aura::button size="sm">Small</x-aura::button>
<x-aura::button size="md">Medium</x-aura::button>
<x-aura::button size="lg">Large</x-aura::button>
<x-aura::button size="xl">Extra Large</x-aura::button>

Form Submit

<form method="POST" action="/save">
    @csrf
    {{-- form fields --}}
    <x-aura::button type="submit" variant="primary" icon="check">
        Save Changes
    </x-aura::button>
</form>

Slots

Slot Description
Default Button label text

Events

The button supports all standard HTML events as well as Alpine.js and Livewire directives:

{{-- Alpine.js --}}
<x-aura::button x-on:click="doSomething()">Click</x-aura::button>

{{-- Livewire --}}
<x-aura::button wire:click="save">Save</x-aura::button>

Accessibility

  • Renders as a <button> by default with proper type attribute.
  • When disabled or loading, the disabled attribute is set on <button> elements.
  • When using href with disabled state, aria-disabled="true" and tabindex="-1" are applied to the <a> tag.
  • Icon-only buttons should include aria-label for screen reader support.
  • The loading spinner replaces the left icon visually but the button text remains for screen readers.
  • All buttons are focusable and support keyboard activation (Enter/Space).