Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add fab

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

The <x-aura::fab> component renders a floating action button (FAB) fixed to a corner of the viewport. It supports multiple positions, sizes, and color variants. When expandable is enabled, clicking the FAB reveals a list of secondary action buttons from the actions slot.

Basic Usage

<div class="relative h-48 w-full rounded-lg border border-dashed border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-800 overflow-hidden">
    <div class="absolute bottom-4 right-4">
        <button type="button" class="h-12 w-12 bg-violet-500 hover:bg-violet-600 text-white inline-flex items-center justify-center rounded-full shadow-lg">
            <x-aura::icon name="plus" class="h-5 w-5" />
        </button>
    </div>
</div>
<x-aura::fab icon="plus" />

Props

Prop Type Default Description
position string 'bottom-right' Fixed position: bottom-right, bottom-left, top-right, top-left.
size string 'md' Button size: sm, md, lg.
color string 'primary' Color variant: primary, success, danger, secondary.
icon string 'plus' Icon displayed inside the FAB.
expandable bool false Enable expandable action menu on click.

Slots

Slot Description
actions Secondary action buttons revealed when the expandable FAB is clicked.

Variants / Examples

Basic FAB

<div class="relative h-48 rounded-lg border border-dashed border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-800 overflow-hidden">
    <div class="absolute bottom-4 right-4">
        <button type="button" class="h-12 w-12 bg-violet-500 hover:bg-violet-600 text-white inline-flex items-center justify-center rounded-full shadow-lg transition hover:shadow-xl">
            <x-aura::icon name="plus" class="h-5 w-5" />
        </button>
    </div>
</div>
<x-aura::fab icon="plus" color="primary" />

Color and Size Variants

4 FABs, one per corner 
<div class="relative h-48 rounded-lg border border-dashed border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-800 overflow-hidden">
    <div class="absolute top-4 left-4">
        <button type="button" class="h-10 w-10 bg-violet-500 text-white inline-flex items-center justify-center rounded-full shadow-lg"><x-aura::icon name="plus" class="h-4 w-4" /></button>
    </div>
    <div class="absolute top-4 right-4">
        <button type="button" class="h-12 w-12 bg-green-500 text-white inline-flex items-center justify-center rounded-full shadow-lg"><x-aura::icon name="pencil" class="h-5 w-5" /></button>
    </div>
    <div class="absolute bottom-4 left-4">
        <button type="button" class="h-16 w-16 bg-red-500 text-white inline-flex items-center justify-center rounded-full shadow-lg"><x-aura::icon name="trash" class="h-7 w-7" /></button>
    </div>
    <div class="absolute bottom-4 right-4">
        <button type="button" class="h-12 w-12 bg-gray-600 text-white inline-flex items-center justify-center rounded-full shadow-lg"><x-aura::icon name="settings" class="h-5 w-5" /></button>
    </div>
    <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
        <span class="text-xs text-gray-400">4 FABs, one per corner</span>
    </div>
</div>
<x-aura::fab icon="plus" color="primary" size="sm" position="top-left" />
<x-aura::fab icon="pencil" color="success" size="md" position="top-right" />
<x-aura::fab icon="trash" color="danger" size="lg" position="bottom-left" />
<x-aura::fab icon="settings" color="secondary" size="md" position="bottom-right" />

Expandable with Actions

<div class="relative h-64 rounded-lg border border-dashed border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-800 overflow-hidden" x-data="{ open: false }">
    <div class="absolute bottom-4 right-4 flex flex-col items-center">
        <div x-show="open" x-transition class="mb-2 flex flex-col-reverse gap-2">
            <button type="button" class="h-10 w-10 bg-green-500 text-white inline-flex items-center justify-center rounded-full shadow-md"><x-aura::icon name="image" class="h-4 w-4" /></button>
            <button type="button" class="h-10 w-10 bg-gray-600 text-white inline-flex items-center justify-center rounded-full shadow-md"><x-aura::icon name="file-text" class="h-4 w-4" /></button>
            <button type="button" class="h-10 w-10 bg-red-500 text-white inline-flex items-center justify-center rounded-full shadow-md"><x-aura::icon name="camera" class="h-4 w-4" /></button>
        </div>
        <button type="button" x-on:click="open = !open" class="h-12 w-12 bg-violet-500 hover:bg-violet-600 text-white inline-flex items-center justify-center rounded-full shadow-lg transition">
            <span :class="open ? 'rotate-45' : ''" class="transition-transform">
                <x-aura::icon name="plus" class="h-5 w-5" />
            </span>
        </button>
    </div>
</div>
<x-aura::fab icon="plus" :expandable="true" color="primary">
    <x-slot:actions>
        <x-aura::fab icon="image" color="success" size="sm" x-on:click="$dispatch('open-modal', 'upload-image')" />
        <x-aura::fab icon="file-text" color="secondary" size="sm" x-on:click="$dispatch('open-modal', 'new-document')" />
        <x-aura::fab icon="camera" color="danger" size="sm" x-on:click="$dispatch('open-modal', 'take-photo')" />
    </x-slot:actions>
</x-aura::fab>

Accessibility

  • The FAB renders as a <button> with aria-label describing its action.
  • When expandable, the toggle uses aria-expanded to indicate the menu state.
  • Secondary actions in the expanded menu are focusable and keyboard-navigable.
  • The FAB icon is decorative; the aria-label provides the accessible name.