Noora.ButtonDropdown (noora v0.76.0)

Copy Markdown

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

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

Summary

Functions

button_dropdown(assigns)
button_sizes()

Functions

button_dropdown(assigns)

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