livewire-material/resources/views/components/fab.blade.php

{{-- An M3 Expressive floating action button: the screen's primary action.

     With only an `icon` it is a FAB — `size` `sm` 56px (the default; M3's deprecated small FAB is
     gone, so this is the baseline FAB), `md` 80px, `lg` 96px. With a `label` it is an extended
     FAB at the same three heights. `color` is `primary` (the default), `secondary` or `tertiary`,
     drawn in its container, or in the colour itself with `variant="filled"`.

     It does not place itself: put it where the layout wants it, e.g.
     `<div class="fixed end-4 bottom-4"><x-fab icon="add" tooltip="New share" /></div>`. For a
     create action that is a FAB on a phone and a header button above, use `<x-button fab>`.

     The glyph is filled, not outlined: M3 says so twice, in the FAB's anatomy and again in its
     guidelines ("icon should be filled (not outlined) and unambiguous").

     There is no `disabled`: M3 says never to disable a FAB — "if its action is unavailable,
     remove the FAB entirely instead" — so hide it (`@if`), or leave it out of the render, rather
     than greying it out. A form-submit FAB that must not be pressed twice takes the caller's own
     `wire:loading.attr="disabled"`.

     `data-fab` marks the root, so a place a FAB sits in can draw it its own way: a navigation
     rail flattens a nested FAB to elevation 0.

     `collapse-on-scroll` is M3's extended FAB that "can collapse to a FAB on scroll-down and
     re-expand to extended on scroll-up": while the window scrolls down it shrinks to the FAB of
     its size, and it extends again when the page scrolls back up or reaches the top. The label
     closes and fades while the width follows it on the spatial spring (resources/css/components/
     actions.css); under reduced motion the two swap outright. The label stays in the page,
     clipped rather than removed, so the collapsed FAB keeps its accessible name. It needs an
     `icon` — a FAB with no glyph is no FAB — and does nothing on a plain FAB.

     Sizes, corners and elevation from FabBaseline/Medium/LargeTokens and ExtendedFab*Tokens
     (androidx Compose Material 3, Apache-2.0). --}}

@props([
    'icon' => null,
    'label' => null,
    'size' => 'sm',
    'color' => 'primary',
    'variant' => 'container',
    'link' => null,
    'external' => false,
    'tooltip' => null,
    'type' => 'button',
    'collapseOnScroll' => false,
])

@php
    $size = in_array($size, ['sm', 'md', 'lg'], true) ? $size : 'sm';
    $color = in_array($color, ['primary', 'secondary', 'tertiary'], true) ? $color : 'primary';
    $extended = filled($label) || $slot->isNotEmpty();
    $collapsing = $collapseOnScroll && $extended && filled($icon);
    $isLink = filled($link);

    $colours = $variant === 'filled'
        ? ['primary' => 'bg-primary text-on-primary', 'secondary' => 'bg-secondary text-on-secondary', 'tertiary' => 'bg-tertiary text-on-tertiary'][$color]
        : ['primary' => 'bg-primary-container text-on-primary-container', 'secondary' => 'bg-secondary-container text-on-secondary-container', 'tertiary' => 'bg-tertiary-container text-on-tertiary-container'][$color];

    $dimensions = $extended
        ? ['sm' => 'h-14 min-w-20 gap-2 px-4 rounded-corner-lg type-title-md', 'md' => 'h-20 min-w-20 gap-4 px-[26px] rounded-corner-lg-increased type-title-lg', 'lg' => 'h-24 min-w-24 gap-5 px-7 rounded-corner-xl type-headline-sm'][$size]
        : ['sm' => 'size-14 rounded-corner-lg', 'md' => 'size-20 rounded-corner-lg-increased', 'lg' => 'size-24 rounded-corner-xl'][$size];

    $iconSize = ['sm' => 'size-6', 'md' => 'size-7', 'lg' => 'size-8'][$size];
    $anchor = $tooltip !== null ? '--material-fab-'.\Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10)) : null;
    $tag = $isLink ? 'a' : 'button';

    $attributes = $attributes
        ->class([
            'state-layer focus-ring inline-flex shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap',
            'shadow-elevation-3 hover:shadow-elevation-4 transition-[box-shadow,background-color,color] duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast',
            $dimensions,
            $colours,
        ])
        ->merge(array_filter([
            'href' => $isLink ? $link : null,
            'target' => $isLink && $external ? '_blank' : null,
            'rel' => $isLink && $external ? 'noopener' : null,
            'wire:navigate' => $isLink && ! $external && ! $attributes->has('wire:navigate') ? true : null,
            'type' => $isLink ? null : $type,
            // The hook a place uses to draw a nested FAB its own way: a rail flattens it to 0dp.
            'data-fab' => true,
            'x-data' => $collapsing ? 'materialFab' : null,
            'x-bind:data-collapsed' => $collapsing ? "collapsed ? '' : null" : null,
            'data-fab-collapsible' => $collapsing ? true : null,
            'data-fab-size' => $collapsing ? $size : null,
            'aria-label' => ! $extended && ! $attributes->has('aria-label') ? $tooltip : null,
            'style' => $anchor ? "anchor-name: {$anchor}" : null,
        ], fn ($value): bool => $value !== null));
@endphp

<{{ $tag }} {{ $attributes }}>
    @if ($icon)
        <x-livewire-material::icon :name="$icon" filled :class="$iconSize" />
    @endif

    @if ($collapsing)
        <span data-fab-label><span>{{ $label ?? $slot }}</span></span>
    @elseif ($extended)
        <span>{{ $label ?? $slot }}</span>
    @endif

    @if ($tooltip !== null)
        <x-livewire-material::tooltip :text="$tooltip" :anchor="$anchor" />
    @endif
</{{ $tag }}>