RealZone22/PenguBlade
Watch
1
0
Fork
You've already forked PenguBlade
 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions
Page: Button
Pages
Accordion Alert Avatar Badge Banner Breadcrumb Button Card Carousel Chat Checkbox Copy Counter Divider Dropdown File Home Input KBD Link Modal Password Progress Radio Range Rating Select Skeleton Spinner Steps Tab Table Textarea Toast Toggle Tooltip
1 Button
Lenny P. edited this page 2026-10-06 13:37:25 +02:00
Table of contents

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.