# `Noora.ButtonDropdown`

A button with an attached dropdown menu, combining a primary action button with a dropdown trigger.

The component renders a button that has a main clickable area and a separate dropdown trigger area,
allowing users to perform a primary action or access additional options via a dropdown menu.

## Example

```elixir
<.button_dropdown id="actions-menu" label="Button" size="large">
  <:icon_left><.chevron_left /></:icon_left>
  <:icon_right><.chevron_right /></:icon_right>
  <.dropdown_item label="Option 1" on_click="option_1" />
  <.dropdown_item label="Option 2" on_click="option_2" />
</.button_dropdown>
```

# `button_dropdown`

## Attributes

* `id` (`:string`) (required) - Unique identifier for the dropdown component.
* `label` (`:string`) (required) - The label of the button.
* `size` (`:string`) - Determines the overall size of the elements, including padding, font size, and other items. Defaults to `"large"`. Must be one of `"medium"`, or `"large"`.
* `disabled` (`:boolean`) - Whether the button dropdown is disabled. Defaults to `false`.
* `on_open_change` (`:string`) - Event handler for when the dropdown opens. Defaults to `nil`.
* `on_highlight_change` (`:string`) - Event handler for when the highlighted option changes. Defaults to `nil`.
* `on_select` (`:string`) - Event handler for when an option is selected. Defaults to `nil`.
* `on_escape_key_down` (`:string`) - Event handler for when the escape key is pressed. Defaults to `nil`.
* `on_pointer_down_outside` (`:string`) - Event handler for when the pointer is pressed outside the dropdown. Defaults to `nil`.
* `on_focus_outside` (`:string`) - Function called when the focus is moved outside the component. Defaults to `nil`.
* `on_interact_outside` (`:string`) - Function called when an interaction happens outside the component. Defaults to `nil`.
* `close_on_select` (`:boolean`) - Whether to close the dropdown when an item is selected. Defaults to `true`.
* `align` (`:string`) - Alignment of the dropdown menu relative to the button. Defaults to `"start"`. Must be one of `"start"`, or `"end"`.
* Global attributes are accepted. Additional HTML attributes for the main button. Supports all globals plus: `["phx-click"]`.
## Slots

* `icon_left` - Icon displayed on the left of the label.
* `icon_right` - Icon displayed on the right of the label.
* `inner_block` - Content to be rendered inside the dropdown menu.

# `button_sizes`

---

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