Button Group

Description

Organize related buttons or actions into a single cohesive unit.

FREE

This component is available for free. It implements the Bootstrap Button Group component. See the installation instructions below for more details.

Arguments

Name	Default	Type	Description
`aria_label`		`String`	Aria label of the button group wrapper
`size`		`String`	The size of the button group. Options: `lg`, `sm`
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Examples

Default

<%= render Railsboot::ButtonGroupComponent.new(aria_label: "Default Example") do %>
  <%= render Railsboot::ButtonComponent.new(text: "Left") %>
  <%= render Railsboot::ButtonComponent.new(text: "Middle") %>
  <%= render Railsboot::ButtonComponent.new(text: "Right") %>
<% end %>

<div class="btn-group" role="group" aria-label="Default Example">
  <button type="button" class="btn btn-primary">
    Left
  </button>
  <button type="button" class="btn btn-primary">
    Middle
  </button>
  <button type="button" class="btn btn-primary">
    Right
  </button>
</div>

Links

<%= render Railsboot::ButtonGroupComponent.new(aria_label: "Links Example") do %>
  <%= render Railsboot::Button::LinkComponent.new(text: "Active Link", href: "#", class: "active", aria: {current: "page"}) %>
  <%= render Railsboot::Button::LinkComponent.new(text: "Link", href: "#") %>
  <%= render Railsboot::Button::LinkComponent.new(text: "Link", href: "#") %>
<% end %>

<div class="btn-group" role="group" aria-label="Links Example">
  <a aria-current="page" class="btn btn-primary active" href="#">
    Active Link
  </a>
  <a class="btn btn-primary" href="#">
    Link
  </a>
  <a class="btn btn-primary" href="#">
    Link
  </a>
</div>

Mixed styles

<%= render Railsboot::ButtonGroupComponent.new(aria_label: "Mixed Styles Example") do %>
  <%= render Railsboot::ButtonComponent.new(text: "Left", variant: "danger") %>
  <%= render Railsboot::ButtonComponent.new(text: "Middle", variant: "warning") %>
  <%= render Railsboot::ButtonComponent.new(text: "Right", variant: "success") %>
<% end %>

<div class="btn-group" role="group" aria-label="Mixed Styles Example">
  <button type="button" class="btn btn-danger">
    Left
  </button>
  <button type="button" class="btn btn-warning">
    Middle
  </button>
  <button type="button" class="btn btn-success">
    Right
  </button>
</div>

Outline styles

<%= render Railsboot::ButtonGroupComponent.new(aria_label: "Outline Styles Example") do %>
  <%= render Railsboot::ButtonComponent.new(text: "Left", outline: true) %>
  <%= render Railsboot::ButtonComponent.new(text: "Middle", outline: true) %>
  <%= render Railsboot::ButtonComponent.new(text: "Right", outline: true) %>
<% end %>

<div class="btn-group" role="group" aria-label="Outline Styles Example">
  <button type="button" class="btn btn-outline-primary">
    Left
  </button>
  <button type="button" class="btn btn-outline-primary">
    Middle
  </button>
  <button type="button" class="btn btn-outline-primary">
    Right
  </button>
</div>

Sizes

<%= render Railsboot::ButtonGroupComponent.new(aria_label: "Large Size", size: "lg") do %>
  <%= render Railsboot::ButtonComponent.new(text: "Left", outline: true) %>
  <%= render Railsboot::ButtonComponent.new(text: "Middle", outline: true) %>
  <%= render Railsboot::ButtonComponent.new(text: "Right", outline: true) %>
<% end %>

<%= render Railsboot::ButtonGroupComponent.new(aria_label: "Default Size") do %>
  <%= render Railsboot::ButtonComponent.new(text: "Left", outline: true) %>
  <%= render Railsboot::ButtonComponent.new(text: "Middle", outline: true) %>
  <%= render Railsboot::ButtonComponent.new(text: "Right", outline: true) %>
<% end %>

<%= render Railsboot::ButtonGroupComponent.new(aria_label: "Small Size", size: "sm") do %>
  <%= render Railsboot::ButtonComponent.new(text: "Left", outline: true) %>
  <%= render Railsboot::ButtonComponent.new(text: "Middle", outline: true) %>
  <%= render Railsboot::ButtonComponent.new(text: "Right", outline: true) %>
<% end %>

<div class="btn-group btn-group-lg" role="group" aria-label="Large Size">
  <button type="button" class="btn btn-outline-primary">
    Left
  </button>
  <button type="button" class="btn btn-outline-primary">
    Middle
  </button>
  <button type="button" class="btn btn-outline-primary">
    Right
  </button>
</div>
<div class="btn-group" role="group" aria-label="Default Size">
  <button type="button" class="btn btn-outline-primary">
    Left
  </button>
  <button type="button" class="btn btn-outline-primary">
    Middle
  </button>
  <button type="button" class="btn btn-outline-primary">
    Right
  </button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Small Size">
  <button type="button" class="btn btn-outline-primary">
    Left
  </button>
  <button type="button" class="btn btn-outline-primary">
    Middle
  </button>
  <button type="button" class="btn btn-outline-primary">
    Right
  </button>
</div>

With icon

<%= render Railsboot::ButtonGroupComponent.new(aria_label: "Outline Styles Example") do %>
  <%= render Railsboot::ButtonComponent.new(outline: true, class: "d-flex align-items-center") do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001" />
    </svg>
  <% end %>
  <%= render Railsboot::ButtonComponent.new(outline: true, class: "d-flex align-items-center") do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0z" />
    </svg>
  <% end %>
  <%= render Railsboot::ButtonComponent.new(outline: true, class: "d-flex align-items-center") do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5" />
    </svg>
  <% end %>
<% end %>

<div class="btn-group" role="group" aria-label="Outline Styles Example">
  <button type="button" class="btn btn-outline-primary d-flex align-items-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001" />
    </svg>
  </button>
  <button type="button" class="btn btn-outline-primary d-flex align-items-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0z" />
    </svg>
  </button>
  <button type="button" class="btn btn-outline-primary d-flex align-items-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5" />
    </svg>
  </button>
</div>

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
The desired component itself (app/components/railsboot/button_group_component.rb).
A view template (app/components/railsboot/button_group_component.html.erb) for the component unless it's rendered inline.
Any other dependent components such as Slots (just if the component needs those)
Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
A test file for the components (test/components/railsboot/button_group_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Button Callout