Class: UI::ButtonGroupComponent

Inherits:
ViewComponent::Base
  • Object
show all
Includes:
ButtonGroupBehavior
Defined in:
app/view_components/ui/button_group_component.rb

Overview

ButtonGroupComponent - ViewComponent implementation

A container that groups related buttons together with consistent styling. Uses ButtonGroupBehavior module for shared styling logic.

Based on shadcn/ui ButtonGroup: ui.shadcn.com/docs/components/button-group

Examples:

Horizontal button group (default)

<%= render UI::ButtonGroupComponent.new do %>
  <%= render UI::ButtonComponent.new(variant: :outline) { "Button 1" } %>
  <%= render UI::ButtonComponent.new(variant: :outline) { "Button 2" } %>
<% end %>

Vertical button group

<%= render UI::ButtonGroupComponent.new(orientation: :vertical) do %>
  <%= render UI::ButtonComponent.new(variant: :outline, size: :icon) { "+" } %>
  <%= render UI::ButtonComponent.new(variant: :outline, size: :icon) { "-" } %>
<% end %>

Instance Method Summary collapse

Methods included from ButtonGroupBehavior

#button_group_classes, #button_group_html_attributes

Constructor Details

#initialize(orientation: :horizontal, classes: "", **attributes) ⇒ ButtonGroupComponent

Returns a new instance of ButtonGroupComponent.

Parameters:

  • orientation (Symbol, String) (defaults to: :horizontal) —

    Direction of the button group (:horizontal, :vertical)

  • classes (String) (defaults to: "") —

    Additional CSS classes to merge

  • attributes (Hash) —

    Additional HTML attributes



27
28
29
30
31
 
# File 'app/view_components/ui/button_group_component.rb', line 27

def initialize(orientation: :horizontal, classes: "", **attributes)
  @orientation = orientation
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#call ⇒ Object 



33
34
35
36
37
 
# File 'app/view_components/ui/button_group_component.rb', line 33

def call
  tag.div(**button_group_html_attributes.deep_merge(@attributes)) do
    content
  end
end