PhiaUi.Components.SplitButton (phia_ui v0.1.17)

Copy Markdown View Source

Split button: primary action (left) + dropdown caret (right).

Requires the PhiaSplitButton JS hook registered in your LiveSocket.

Example

<.split_button id="actions-btn" variant={:default}>
  Save
  <:dropdown>
    <div data-split-item role="menuitem" phx-click="save_draft"
         class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
      Save as draft
    </div>
    <div data-split-item role="menuitem" phx-click="publish"
         class="flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
      Publish
    </div>
  </:dropdown>
</.split_button>

Setup

Register PhiaSplitButton in your LiveSocket hooks:

import PhiaSplitButton from "./hooks/split_button"
let liveSocket = new LiveSocket("/live", Socket, { hooks: { PhiaSplitButton } })

Summary

Functions

split_button(assigns)

Renders a split button with a primary action and a dropdown caret.

Functions

split_button(assigns)

Renders a split button with a primary action and a dropdown caret.

The dropdown opens on caret click, closes on outside click or Escape, and supports roving focus on [data-split-item] elements via the PhiaSplitButton JS hook.

Attributes

  • id (:string) (required) - Unique DOM ID for the hook target.
  • variant (:atom) - Visual style variant. Defaults to :default. Must be one of :default, :destructive, :outline, or :secondary.
  • size (:atom) - Size variant. Defaults to :default. Must be one of :sm, :default, or :lg.
  • disabled (:boolean) - Defaults to false.
  • loading (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the primary button.

Slots

  • inner_block (required) - Primary button label.
  • dropdown (required) - Dropdown menu items (use data-split-item on each).