Blocks

Button Group

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

Installation

bin/rails g shadcnrb:component button_group

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 |g| %>
  <%= g.text "Sort by", icon: :"chevrons-up-down" %>
  <%= sui.button "Name",   variant: :outline, icon: :"chevron-down" %>
  <%= sui.button "Date",   variant: :outline, icon: :"chevrons-up-down" %>
  <%= sui.button "Status", variant: :outline, icon: :"chevrons-up-down" %>
<% 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.

<%= sui.dropdown_menu do |m| %>
  <%= sui.button_group do %>
    <%= sui.button "Save" %>
    <%= m.trigger(size: :icon) { sui.icon(:"chevron-down") } %>
  <% end %>
  <%= m.content do %>
    <%= m.item "Save and exit" %>
    <%= m.item "Save as draft" %>
    <%= m.separator %>
    <%= m.item "Discard changes" %>
  <% end %>
<% end %>

API

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