Renders a Floating Action Button (FAB).

When neither main nor item slots are provided, renders a simple circular button fixed to the specified corner of the viewport.

When main or item slots are provided, renders a speed-dial: a vertically stacked group of action items revealed above the main trigger button.

Examples

<%!-- Simple FAB --%>
<.float_button icon="plus" on_click="new_item" aria_label="Create new item" />

<%!-- Top-left FAB --%>
<.float_button icon="plus" on_click="new_item" position={:top_left} />

<%!-- Speed-dial FAB --%>
<.float_button position={:bottom_right}>
  <:main icon="menu" aria_label="Actions" />
  <:item icon="edit" on_click="edit" label="Edit" />
  <:item icon="share" on_click="share" label="Share" />
</.float_button>

Attributes

• id (:string) - Element ID used to wire up speed-dial toggle targets. Must be unique per page. Defaults to "float-btn".
• icon (:string) - Lucide icon name to render inside the simple button (e.g. "plus", "menu"). Defaults to nil.
• on_click (:string) - LiveView event name passed to phx-click. Defaults to nil.
• aria_label (:string) - Accessible label for the button; used by screen readers. Defaults to "Action".
• position (:atom) - Fixed position of the FAB in the viewport. Defaults to :bottom_right. Must be one of :bottom_right, :bottom_left, :top_right, or :top_left.
• class (:string) - Additional CSS classes merged via cn/1 (last wins). Defaults to nil.

Slots

• main - Main trigger button for speed-dial mode. Provide :icon and :aria_label attrs. Accepts attributes:
  • icon (:string) - Lucide icon name for the main trigger button.
  • aria_label (:string) - Accessible label for the main trigger button.
• item - Speed-dial action item. Provide :icon, :on_click, and :label attrs. Accepts attributes:
  • icon (:string) - Lucide icon name for the item button.
  • on_click (:string) - LiveView event name passed to phx-click for this item.
  • label (:string) - Visible label text rendered beside the item button.