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

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 } })

# `split_button`

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

---

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