Group - Rails UI Components

Usage

<%= ui.group do %>
  <%= ui.btn "Button First" %>
  <%= ui.btn "Button Second" %>
  <%= ui.btn "Button Third" %>
<% end %>

<%= ui.group sticky: false do %>
  <%= ui.btn "With Gap", variant: :outline %>
  <%= ui.btn "With Gap", variant: :outline %>
<% end %>

Block contentButtons, inputs, dropdowns, or any elements to group together.

Props

Prop	Type	Default	Description
`sticky`	`Boolean`	`true`	When true, elements are joined without gaps. When false, elements have gaps between them.

Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.

Examples

Sticky (default)

<%= ui.group do %>
  <%= ui.btn "Button First" %>
  <%= ui.btn "Button Second" %>
  <%= ui.btn "Button Third" %>
<% end %>

With Gap

<%= ui.group sticky: false do %>
  <%= ui.btn "Button With Gap", variant: :outline %>
  <%= ui.btn "Button With Gap", variant: :outline %>
  <%= ui.btn "Button With Gap", variant: :outline %>
<% end %>

With Dropdown

<%= ui.group do %>
  <%= ui.btn "Button First", variant: :outline %>
  <%= ui.dropdown do %>
    <%= ui.dropdown_trigger ui.icon("chevron-down"), as: :btn, variant: :outline, size: :icon_md %>
    <%= ui.dropdown_menu do %>
      <%= ui.dropdown_title "Title" %>
      <%= ui.dropdown_link "Settings", url: "#" %>
      <%= ui.dropdown_link "Sign Out", url: "#" %>
    <% end %>
  <% end %>
<% end %>

With Input

<%= ui.group do %>
  <input type="text" class="form__field">
  <%= ui.btn "Search", variant: :outline %>
<% end %>