shadcn-rails

Button Group

Groups related buttons together with connected styling.

No JavaScript Required
button-group/default 
<%= render(Shadcn::ButtonGroupComponent.new) do |group| %>
  <% group.with_button(variant: :outline) { "Left" } %>
  <% group.with_button(variant: :outline) { "Center" } %>
  <% group.with_button(variant: :outline) { "Right" } %>
<% end %>

Installation

Add the component to your project:

rails generate shadcn:add button_group

Usage

<%= render(Shadcn::ButtonGroupComponent.new) do |group| %>
  <% group.with_button(variant: :outline) { "Left" } %>
  <% group.with_button(variant: :outline) { "Center" } %>
  <% group.with_button(variant: :outline) { "Right" } %>
<% end %>

Examples

Vertical

<%= render Shadcn::ButtonGroupComponent.new(orientation: :vertical) do |group| %>
  <% group.with_button(variant: :outline) { "Top" } %>
  <% group.with_button(variant: :outline) { "Middle" } %>
  <% group.with_button(variant: :outline) { "Bottom" } %>
<% end %>

Mixed Variants

<%= render Shadcn::ButtonGroupComponent.new do |group| %>
  <% group.with_button { "Save" } %>
  <% group.with_button(variant: :outline) { "Cancel" } %>
<% end %>

Icon Buttons

<%= render Shadcn::ButtonGroupComponent.new do |group| %>
  <% group.with_button(variant: :outline, size: :icon) do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"></path>
    </svg>
  <% end %>
  <% group.with_button(variant: :outline, size: :icon) do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <line x1="21" x2="14" y1="4" y2="4"></line>
      <line x1="10" x2="3" y1="4" y2="4"></line>
      <line x1="21" x2="12" y1="12" y2="12"></line>
    </svg>
  <% end %>
  <% group.with_button(variant: :outline, size: :icon) do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <rect width="18" height="18" x="3" y="3" rx="2"></rect>
      <path d="M3 9h18"></path>
    </svg>
  <% end %>
<% end %>

Toolbar Example

<div class="flex items-center gap-4">
  <%= render Shadcn::ButtonGroupComponent.new do |group| %>
    <% group.with_button(variant: :outline, size: :sm) { "Bold" } %>
    <% group.with_button(variant: :outline, size: :sm) { "Italic" } %>
    <% group.with_button(variant: :outline, size: :sm) { "Underline" } %>
  <% end %>

  <%= render Shadcn::SeparatorComponent.new(orientation: :vertical, class_name: "h-6") %>

  <%= render Shadcn::ButtonGroupComponent.new do |group| %>
    <% group.with_button(variant: :outline, size: :sm) { "Left" } %>
    <% group.with_button(variant: :outline, size: :sm) { "Center" } %>
    <% group.with_button(variant: :outline, size: :sm) { "Right" } %>
  <% end %>
</div>

Outline Variant

button-group/outline 
<%= render(Shadcn::ButtonGroupComponent.new) do |group| %>
  <% group.with_button(variant: :outline) { "Bold" } %>
  <% group.with_button(variant: :outline) { "Italic" } %>
  <% group.with_button(variant: :outline) { "Underline" } %>
<% end %>

With Icons

button-group/with_icons 
<%= render(Shadcn::ButtonGroupComponent.new) do |group| %>
  <% group.with_button(variant: :outline, size: :icon) { icon("M15 6l-6 6 6 6") } %>
  <% group.with_button(variant: :outline, size: :icon) { icon("M9 18l6-6-6-6") } %>
<% end %>

API Reference

API Reference

Prop Type Default Description
orientation Symbol :horizontal Layout direction (:horizontal, :vertical)
class_name String nil Additional CSS classes to apply

Slots

  • with_button - Button component (accepts all Button props)

Accessibility

  • Uses role="group" to indicate grouped elements
  • Each button maintains individual focusability and keyboard navigation
  • Consider adding aria-label to the group for context