Skip to content

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

<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

<x-aura::fab icon="plus" color="primary" />

Color and Size Variants

4 FABs, one per corner 
<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

<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.