# `PhiaUi.Components.FloatButton`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/buttons/float_button.ex#L1)

Floating Action Button (FAB) component with optional speed-dial.

Follows the Material Design / shadcn/ui FAB pattern adapted for Phoenix
LiveView. Supports a simple single-button form and a speed-dial form with
a main trigger button and one or more action items.

## Simple button

    <.float_button icon="plus" on_click="new_item" aria_label="Create new item" />

## Speed dial

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

## Positions

| Atom            | CSS classes          |
|-----------------|----------------------|
| `:bottom_right` | `bottom-6 right-6`   |
| `:bottom_left`  | `bottom-6 left-6`    |
| `:top_right`    | `top-6 right-6`      |
| `:top_left`     | `top-6 left-6`       |

## Theme tokens

- `bg-primary` / `text-primary-foreground` — main button background
- `bg-secondary` / `text-secondary-foreground` — speed-dial item buttons
- `hover:bg-primary/90` / `hover:bg-secondary/90` — hover states
- `shadow-lg` / `shadow` — elevation
- `focus-visible:ring-ring` — keyboard focus ring

# `float_button`

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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*