Fluxbit::ButtonGroupComponent or fx_button_group

The Fluxbit::ButtonGroupComponent is a customizable button group component that extends Fluxbit::Component. It allows you to create visually cohesive groups of buttons that are connected together, perfect for toolbars, navigation elements, or grouped actions.

To start using the button group you can use the default way to call the component:

&lt;%= render Fluxbit::ButtonGroupComponent.new do |group| %&gt;
  &lt;%= group.with_button(color: :default) do %&gt;First&lt;% end %&gt;
  &lt;%= group.with_button(color: :default) do %&gt;Second&lt;% end %&gt;
  &lt;%= group.with_button(color: :default) do %&gt;Third&lt;% end %&gt;
&lt;% end %&gt;

or you can use the alias (from the helpers):

&lt;%= fx_button_group do |group| %&gt;
  &lt;%= group.with_button(color: :default) do %&gt;First&lt;% end %&gt;
  &lt;%= group.with_button(color: :default) do %&gt;Second&lt;% end %&gt;
  &lt;%= group.with_button(color: :default) do %&gt;Third&lt;% end %&gt;
&lt;% end %&gt;

The result is:

Options

Param	Default	Description
**props		Additional HTML attributes applied to the button group container.

Slots

The component supports the following slots:

with_button: Add individual buttons to the group with all standard button options (color, size, pill, disabled, etc.)

Examples

Basic Button Groups

Outlined Button Groups

Button Groups with Icons

Different Sizes

Mixed Button Types

Active States

Disabled Buttons

Adding/Removing classes

Adding other properties

Customization

You can customize the appearance and behavior of this component by passing different initialization parameters and adding custom styles. To do this you can create a initializer file like the:

# /config/initializers/change_button_group_component_defaults.rb

Fluxbit::Config::ButtonComponent.styles[:group] = 'inline-flex rounded-lg shadow-md' # the default is 'inline-flex rounded-md shadow-xs'

Dependencies

Anyicon: Used for rendering icons in buttons.
Tailwind CSS: Used for styling the component.
Flowbite: Used for styling.

Styles

<%= html_escape(JSON.pretty_generate(Fluxbit::Config::ButtonComponent.styles)) %>

References

Flowbite Button Group