Button group(ui_button_group)Bootstrap Logo

UiBibz::Ui::Core::Forms::Buttons::ButtonGroup

Group a series of buttons together on a single line with the button group.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

ui_button_group options, html_options do |bg|
  # by variable
  bg.button content, options, html_options
  # by block
  bg.button options, html_options do
    content
  end
end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • popover[string/hash](use component popover method)
  • position[symbol](:horizontal, :vertical)<default: :horizontal>
  • size[symbol](:lg, :md, :sm)(use component size method)
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • target[string](use component stimulus-options method)
  • tooltip[string/hash](use component tooltip method)
  • turbo[string](use component turbo method)

Items

The allowed items for this component are:
  • button(inherit of button)
  • button_link(inherit of button_link)
  • dropdown(inherit of dropdown)
  • html[html/string]Insert html as a component
  • input(inherit of input)

Examples

Some examples explain how to use the options present in the component.

Button group

ui_button_group do |bg|
  bg.button "Left"
  bg.button "Middle"
  bg.button "Right"
end

<div class="btn-group" role="group">
  <button class="btn-primary btn">Left</button>
  <button class="btn-primary btn">Middle</button>
  <button class="btn-primary btn">Right</button>
</div>

Status

The status option has following symbols for argument:
  • :primary
  • :secondary
  • :success
  • :danger
  • :warning
  • :info
  • :light
  • :dark
ui_button_group status: :success do |bg|
  bg.button "Left"
  bg.button "Middle"
  bg.button "Right"
end

<div class="btn-group btn-group-sm" role="group">
  <button class="btn-primary btn">Left</button>
  <button class="btn-primary btn">Middle</button>
  <button class="btn-primary btn">Right</button>
</div>

Size

The size option has following symbols for argument:
  • :lg
  • :md
  • :sm
ui_button_group size: :sm do |bg|
  bg.button "Left", state: :active
  bg.button "Middle"
  bg.button "Right"
end

<div class="btn-group btn-group-sm" role="group">
  <button class="btn-primary btn active">Left</button>
  <button class="btn-primary btn">Middle</button>
  <button class="btn-primary btn">Right</button>
</div>

Outline

ui_button_group outline: true do |bg|
  bg.button "Left"
  bg.button "Middle"
  bg.button "Right"
end

<div class="btn-group btn-group-sm" role="group">
  <button class="btn-outline-secondary btn">Left</button>
  <button class="btn-outline-secondary btn">Middle</button>
  <button class="btn-outline-secondary btn">Right</button>
</div>

Position

  • position[symbol](:horizontal, :vertical)<default: :horizontal>
ui_button_group position: :vertical do |bg|
  bg.button "Left"
  bg.button "Middle"
  bg.button "Right"
end

<div class="btn-group-vertical" role="group">
  <button class="btn-primary btn">Left</button>
  <button class="btn-primary btn">Middle</button>
  <button class="btn-primary btn">Right</button>
</div>

Nesting

Link
ActionAnother action
Separate link
ui_button_group status: :primary do |bg|
  bg.button "Dark", status: :dark
  bg.button_link "Link", url: "#button-link"
  bg.dropdown "Dropdown" do |bd|
    bd.link "Action", url: "#action"
    bd.link "Another action", url: "#another-action"
    bd.divider
    bd.header "Header"
    bd.link "Separate link", url: "#separate-link"
  end
end

<div class="btn-group" role="group">
  <button class="btn-dark btn">Dark</button>
  <a class="btn-primary btn" role="button" href="#button-link">Link</a>
  <div class="dropdown btn-group">
    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown
      <span class="caret"></span>
    </button>
    <div class="dropdown-menu dropdown-menu-left" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;">
      <a class="dropdown-item" href="#action">Action</a>
      <a class="dropdown-item" href="#another-action">Another action</a>
      <div class="dropdown-divider"></div>
      <h6 class="dropdown-header" role="presentation">Header</h6>
      <a class="dropdown-item" href="#separate-link">Separate link</a>
    </div>
  </div>
</div>

Button on toolbar

See the button section