Laravel Button Component

Free · MIT

Interactive button element with multiple variants, sizes, icons, loading state, and link mode.

A Button built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::button>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

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

See the full API, props and live examples in the Button documentation.

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

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
`prefixIcon`	`string\|null`	`null`	Preferred. Icon name placed before the label.
`suffixIcon`	`string\|null`	`null`	Preferred. Icon name placed after the label.
`icon`	`string\|null`	`null`	Deprecated alias for `prefixIcon`. Still supported.
`iconRight`	`string\|null`	`null`	Deprecated alias for `suffixIcon`. Still supported.
`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`