Blocks

Button Group

Merges a row or column of buttons into a single connected control by removing the inner border radius and borders.

Usage

Wrap any number of sui.button elements inside sui.button_group. The default orientation is horizontal.

sui.button_group do
  sui.button "Previous", variant: :outline
  sui.button "Page 1",   variant: :outline
  sui.button "Next",     variant: :outline
end

Vertical orientation

Set orientation: :vertical to stack the buttons.

sui.button_group orientation: :vertical do
  sui.button "Top",    variant: :outline
  sui.button "Middle", variant: :outline
  sui.button "Bottom", variant: :outline
end

With text label

button_group_text renders a non-interactive label styled to match the group height.

Sort by

sui.button_group do
  sui.button_group_text "Sort by"
  sui.button "Name",   variant: :outline
  sui.button "Date",   variant: :outline
  sui.button "Status", variant: :outline
end

Split button

Combine button_group + dropdown_menu to build a primary action with an attached menu. No new component needed — just compose the existing primitives.

live_example do
  sui.dropdown_menu do
    sui.button_group do
      sui.button "Save"
      sui.dropdown_menu_trigger(size: :icon) { sui.icon(:"chevron-down") }
    end
    sui.dropdown_menu_content do
      sui.dropdown_menu_item "Save and exit"
      sui.dropdown_menu_item "Save as draft"
      sui.dropdown_menu_separator
      sui.dropdown_menu_item "Discard changes"
    end
  end
end

API

Method	Key args	Default	Description
button_group	orientation:	:horizontal	Container that connects children. `orientation:` is `:horizontal` or `:vertical`.
button_group_separator	—	—	Thin visual divider between items, rendered as a `<div>` with input-border color.
button_group_text(name)	—	—	Static label element styled to blend with the button group. Accepts a string or block.