Noora.ButtonGroup (noora v0.1.0-rc.2)

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.