Skip to content

Button

Jump to bottom
Lenny P. edited this page Jul 15, 2025 · 3 revisions

Button Components

These Button components provide styled, accessible buttons with multiple variants and sizes, including a special floating circular button. They support loading states, icons, tooltips, hints, and links. Tailwind CSS and Alpine.js are used for styling and interactivity.

Example Usage

Button (standard):

<x-button variant="outline" size="sm" loading="test" wire:click="test" :hideTextWhileLoading="true" tooltip="test" hint="test">
    Test
</x-button>

Floating Button (circular):

<x-button.floating loading="test" wire:click="test" color="secondary" hint="test" tooltip="test" icon="icon-airplay" />

Components & Props

<x-button>

  • variant (string): Style variant of the button. Defaults to solid. Other example: outline.
  • color (string): Color theme, e.g. primary (default), secondary, inverse, info, danger, warning, success
  • size (string): Size of the button. Options: sm, md (default), lg.
  • link (string|null): If set, renders an <a> tag instead of a <button>, linking to this URL.
  • loading (string|bool|null): If truthy, shows a loading spinner and disables the button. Can bind to Livewire loading targets.
  • hideTextWhileLoading (bool): Whether to hide the button text while loading (default false).
  • tooltip (string|null): Tooltip text to show on hover, using Alpine.js tooltip.
  • hint (string|null): Additional small hint text shown below the button.

<x-button.floating>

A circular, square-aspect button ideal for floating action buttons with icon support.

  • variant (string): Style variant, default is solid.
  • color (string): Color theme, e.g. primary (default), secondary, inverse, info, danger, warning, success
  • size (string): Size of the button. Options: sm, md (default), lg.
  • link (string|null): If set, renders an <a> tag instead of a <button>.
  • loading (string|bool|null): Shows a spinner and disables button when true.
  • hideTextWhileLoading (bool): Whether to hide text during loading (default true).
  • hint (string|null): Optional hint text below the button.
  • icon (string|null): Icon class name to show inside the button.
  • tooltip (string|null): Tooltip text shown on hover.

Overview

These Button components give you flexible, fully accessible buttons styled with Tailwind CSS. The main <x-button> is a rectangular button with multiple variants and color schemes. The <x-button.floating> is a compact circular button designed for icon-only usage, ideal as floating action buttons or minimal UI controls. Both support loading states with optional spinners, tooltips, hints, and Livewire integration for dynamic interactivity.

Clone this wiki locally