Button Group

Visually joins a run of buttons, collapsing the borders and inner corners.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add button-group --yes

The button-group registry item installs these files:

app/components/ui_component.rb
app/components/ui/button_group_component.rb
app/components/ui/button_group/text_component.rb
app/components/ui/button_group/separator_component.rb
app/components/ui/separator_component.rb
app/helpers/ui/button_group_helper.rb
app/helpers/ui/separator_helper.rb
vendor/shadwire/shadwire.css

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

<%= ui_button_group do %>
  <%= ui_button(variant: :outline) { "Previous" } %>
  <%= ui_button(variant: :outline) { "Next" } %>
<% end %>

Examples

Default

Two buttons joined into one horizontal group.

<%= ui_button_group do %>
  <%= ui_button(variant: :outline) { ui_icon("chevron-left") + "Previous" } %>
  <%= ui_button(variant: :outline) { "Next" + ui_icon("chevron-right") } %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`ButtonGroup`	`orientation`	`:horizontal`	Joins the buttons in a row (`:horizontal`) or a column (`:vertical`).
`ButtonGroup::Text`	`tag`	`:div`	The element to render; use `:label` to name an input in the group.
`ButtonGroup::Separator`	`orientation`	`:vertical`	`:vertical` between buttons in a row, `:horizontal` in a column.