x-bt-fab — AI Reference

Component Tag

<x-bt-fab />
<x-bt-fab icon="pencil" label="Edit" href="/edit" color="blue" size="lg" />

Architecture

• Fab extends BeartropyComponent (inherits HasPresets, HasErrorBag)
• Renders fab.blade.php — no Alpine, no JS, pure server-rendered
• Preset file: presets/fab.php (22 colors: bg, bg_hover, text)
• Size keys in presets/sizes.php: fabButton (container), fabIcon (icon)
• Renders as <button type="button"> by default; <a> when href present
• Fixed-position wrapper: <div class="fixed" style="right:…; bottom:…; z-index:…">

Props (Constructor)

Slots

Color Preset Structure (presets/fab.php)

'blue' => [
    'bg' => 'bg-blue-600',
    'bg_hover' => 'hover:bg-blue-700',
    'text' => 'text-white',
],

Size Preset Keys (presets/sizes.php)

Template Structure

div.fixed[style="right; bottom; z-index"]
└── button|a.rounded-full.shadow-lg[aria-label]
    └── (slot content | <x-beartropy-ui::icon>)

Common Patterns

{{-- Default FAB --}}
<x-bt-fab />

{{-- Custom icon + label --}}
<x-bt-fab icon="pencil" label="Edit" />

{{-- As a link --}}
<x-bt-fab href="/posts/create" label="New post" />

{{-- Color + size --}}
<x-bt-fab green size="lg" icon="check" label="Confirm" />

{{-- Mobile only --}}
<x-bt-fab :onlyMobile="true" />

{{-- Custom position --}}
<x-bt-fab right="2rem" bottom="5rem" :zIndex="100" />

{{-- Custom slot content --}}
<x-bt-fab label="Add">
    <span class="text-xl font-bold">+</span>
</x-bt-fab>

Key Notes

• $label is used ONLY for aria-label, NOT rendered visually
• Default label is localized: __('beartropy-ui::ui.new') → "New"
• $attributes->merge() handles class merging + all pass-through attributes
• type="button" only added when rendering as <button> (not <a>)
• Focus ring uses focus-visible:ring-2 for keyboard-only visibility
• onlyMobile adds md:hidden to the wrapper <div>, not the button
• Positioning uses inline style (not Tailwind classes) for arbitrary values