shadcn-rails

Button Group

Groups related buttons together with connected styling.

No JavaScript Required

Installation

Add the component to your project:

rails generate shadcn:component 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

Toolbar Example

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