Noora.ButtonGroup (noora v0.11.0)

ButtonGroup component for Noora UI.

This component allows grouping multiple buttons together with consistent styling and spacing. It handles layout, alignment, and proper spacing between buttons in the group.

Example

<.button_group size="medium">
  <.button_group_item label="Edit" navigate="/edit" />
  <.button_group_item label="Delete" />
</.button_group>

Summary

Functions

button_group(assigns)

Attributes

  • size (:string) - The size of the button group. Defaults to "medium". Must be one of "small", "medium", or "large".
  • Global attributes are accepted. Additional HTML attributes.

Slots

  • inner_block (required) - Button group items to be rendered.

button_group_item(assigns)

Attributes

  • label (:string) (required) - The label of the button group item.
  • href (:any) - Uses traditional browser navigation to the new location. Defaults to nil.
  • navigate (:string) - Navigates to a LiveView. Defaults to nil.
  • patch (:string) - Patches the current LiveView. Defaults to nil.
  • icon_only (:boolean) - Determines if the button is icon only. Defaults to false.
  • Global attributes are accepted.

Slots

  • icon_left - Icon displayed on the left of an item.
  • icon_right - Icon displayed on the right of an item.
  • inner_block - Inner block that renders HEEx content.