Button Groups

Pre-configured, design system buttons

Manually Created Button Groups

Patterns

Button Group Themes

= ui.nfg :activity_feed do
  This is an empty activity feed
<div class="activity-feed">This is an empty activity feed
</div>

= ui.nfg :activity_feed do
  This is an empty activity feed
This is an empty activity feed

<h1>Button Groups</h1>
<h2>Pre-configured, design system buttons</h2>
<hr>
<h2>Manually Created Button Groups</h2>
<h3>Patterns</h3>
<h4>Button Group Themes</h4>
<div class='row'>
  <div class='col-md-6'>
    <div class="btn-group example-class" role="group" aria-label="action buttons"><button class="btn btn-primary" type="button">Button</button>
      <button class="btn btn-primary" type="button">Button
      </button><button class="btn btn-primary" type="button">Button
      </button></div>
  </div>
  <div class='col-md-6'>
    <pre><code>= ui.nfg :activity_feed do&#x000A;  This is an empty activity feed</code></pre>
    <pre><code>&lt;div class=&quot;activity-feed&quot;&gt;This is an empty activity feed
&lt;/div&gt;</code></pre>
  </div>
</div>
<br>
<div class='row'>
  <div class='col-md-6'>
    <div class="btn-group example-class" role="group" aria-label="action buttons"><button class="btn btn-secondary" type="button">Button</button>
      <button class="btn btn-secondary" type="button">Button
      </button><button class="btn btn-secondary" type="button">Button
      </button></div>
  </div>
  <div class='col-md-6'>
    <pre><code>= ui.nfg :activity_feed do&#x000A;  This is an empty activity feed</code></pre>
    <pre><code>
        <div class="activity-feed">This is an empty activity feed
        </div>

= ui.nfg :button_group, class: 'example-class' do
  = ui.nfg :button,:success, as: :button, body: 'Button'
  = ui.nfg :button,:success, as: :button do
    Button
  = ui.nfg :button,:success, as: :button do
    Button
<div class="btn-group example-class" role="group" aria-label="action buttons"><button class="btn btn-success" type="button">Button</button><button class="btn btn-success" type="button">Button
  </button><button class="btn btn-success" type="button">Button
  </button></div>

= ui.nfg :button_group, class: 'example-class' do
  = ui.nfg :button, :danger, as: :button, body: 'Button'
  = ui.nfg :button, :danger, as: :button do
    Button
  = ui.nfg :button, :danger, as: :button do
    Button
<div class="btn-group example-class" role="group" aria-label="action buttons"><button class="btn btn-danger" type="button">Button</button><button class="btn btn-danger" type="button">Button
  </button><button class="btn btn-danger" type="button">Button
  </button></div>

= ui.nfg :button_group, class: 'example-class' do
  = ui.nfg :button, :danger, as: :button, body: 'Button'
  = ui.nfg :button, :danger, as: :button do
    Button
  = ui.nfg :button, :danger, as: :button do
    Button
<div class="btn-group example-class" role="group" aria-label="action buttons"><button class="btn btn-danger" type="button">Button</button><button class="btn btn-danger" type="button">Button
  </button><button class="btn btn-danger" type="button">Button
  </button></div>

= ui.nfg :button_group, class: 'example-class' do
  = ui.nfg :button, :info, as: :button, body: 'Button'
  = ui.nfg :button, :info, as: :button do
    Button
  = ui.nfg :button, :info, as: :button do
    Button
<div class="btn-group example-class" role="group" aria-label="action buttons"><button class="btn btn-info" type="button">Button</button><button class="btn btn-info" type="button">Button
  </button><button class="btn btn-info" type="button">Button
  </button></div>

= ui.nfg :button_group, class: 'example-class' do
  = ui.nfg :button, :light, as: :button, body: 'Button'
  = ui.nfg :button, :light, as: :button do
    Button
  = ui.nfg :button, :light, as: :button do
    Button
<div class="btn-group example-class" role="group" aria-label="action buttons"><button class="btn btn-light" type="button">Button</button><button class="btn btn-light" type="button">Button
  </button><button class="btn btn-light" type="button">Button
  </button></div>

= ui.nfg :button_group, class: 'example-class' do
  = ui.nfg :button, :dark, as: :button, body: 'Button'
  = ui.nfg :button, :dark, as: :button do
    Button
  = ui.nfg :button, :dark, as: :button do
    Button
<div class="btn-group example-class" role="group" aria-label="action buttons"><button class="btn btn-dark" type="button">Button</button><button class="btn btn-dark" type="button">Button
  </button><button class="btn btn-dark" type="button">Button
  </button></div>

Button Groups with links

Active Button Link Button without HREF 
= ui.nfg :button_group, class: 'example-class' do
  / = ui.nfg :button, href: '#testURL', body: 'Link Btn W/O :as'
  = ui.nfg :button, :link, :active, href: '#testURL' do
    Active Button
  = ui.nfg :button, :link do
    Link Button without HREF
<div class="btn-group example-class" role="group" aria-label="action buttons"><!-- = ui.nfg :button, href: '#testURL', body: 'Link Btn W/O :as' -->
  <a class="btn active btn-link" href="#testURL" aria-pressed="true">Active Button
  </a><a class="btn btn-link" href="#">Link Button without HREF
  </a></div>

Button groups with buttons

= ui.nfg :button_group, role: 'not a good one' do
  = ui.nfg :button, as: :button, body: 'Button'
  = ui.nfg :button, as: :button do
    Button
  = ui.nfg :button, as: :button do
    Button
<div class="btn-group" role="group" aria-label="action buttons"><button class="btn btn-primary" type="button">Button</button><button class="btn btn-primary" type="button">Button
  </button><button class="btn btn-primary" type="button">Button
  </button></div>

Sizing

= ui.nfg :button_group, :lg, aria: { 'test' => 'test2' } do
  = ui.nfg :button, as: :button, body: 'Left'
  = ui.nfg :button, as: :button do
    Middle
  = ui.nfg :button, as: :button do
    Right
<div class="btn-group btn-group-lg" aria-test="test2" aria-label="action buttons" role="group"><button class="btn btn-primary" type="button">Left</button><button class="btn btn-primary" type="button">Middle
  </button><button class="btn btn-primary" type="button">Right
  </button></div>
= ui.nfg :button_group, aria: { 'test' => 'test2' } do
  = ui.nfg :button, as: :button, body: 'Left'
  = ui.nfg :button, as: :button do
    Middle
  = ui.nfg :button, as: :button do
    Right
<div class="btn-group" aria-test="test2" aria-label="action buttons" role="group"><button class="btn btn-primary" type="button">Left</button><button class="btn btn-primary" type="button">Middle
  </button><button class="btn btn-primary" type="button">Right
  </button></div>
= ui.nfg :button_group, :sm, aria: { 'test' => 'test2' } do
  = ui.nfg :button, as: :button, body: 'Left'
  = ui.nfg :button, as: :button do
    Middle
  = ui.nfg :button, as: :button do
    Right
<div class="btn-group btn-group-sm" aria-test="test2" aria-label="action buttons" role="group"><button class="btn btn-primary" type="button">Left</button><button class="btn btn-primary" type="button">Middle
  </button><button class="btn btn-primary" type="button">Right
  </button></div>

Nesting Button Groups

Nesting Sizes
= ui.nfg :button_group, :lg, aria: { 'test' => 'test2' } do
  = ui.nfg :button, as: :button, body: 'Large Left'
  = ui.nfg :button, as: :button do
    Large Middle
  = ui.nfg :button, as: :button do
    Large Right
<div class="btn-group btn-group-lg" aria-test="test2" aria-label="action buttons" role="group"><button class="btn btn-primary" type="button">Large Left</button><button class="btn btn-primary" type="button">Large Middle
  </button><button class="btn btn-primary" type="button">Large Right
  </button></div>
= ui.nfg :button_group, size: :sm, aria: { 'test' => 'test2' } do
  = ui.nfg :button, as: :button, body: 'Small Left'
  = ui.nfg :button, as: :button do
    Small Middle
  = ui.nfg :button, as: :button do
    Small Right
<div class="btn-group btn-group-sm" aria-test="test2" aria-label="action buttons" role="group"><button class="btn btn-primary" type="button">Small Left</button><button class="btn btn-primary" type="button">Small Middle
  </button><button class="btn btn-primary" type="button">Small Right
  </button></div>
= ui.nfg :button_group, aria: { 'test' => 'test2' } do
  = ui.nfg :button, as: :button, body: 'Small Left'
  = ui.nfg :button, as: :button do
    Small Middle
<div class="btn-group" aria-test="test2" aria-label="action buttons" role="group"><button class="btn btn-primary" type="button">Small Left</button><button class="btn btn-primary" type="button">Small Middle
  </button></div>

Vertical variation

Button groups with buttons

Usage:

  1. In order to make button group full width, you must add:
    class: 'w-100'
  2. In order to center-align the buttons within the full width button group, add:
    class: 'align-items-center'
  3. Example:
    = ui.nfg :button_group, :vertical, class: 'align-items-center w-100' do ... 
= ui.nfg :button_group, :vertical, aria: { 'test' => 'test2' }, class: 'align-items-center w-100' do
  = ui.nfg :button, :lg, as: :button, body: 'Button'
<div class="btn-group-vertical align-items-center w-100" aria-test="test2" aria-label="action buttons" role="group"><button class="btn btn-lg btn-primary" type="button">Button</button></div>
= ui.nfg :button_group, :vertical, aria: { 'test' => 'test2' }, class: 'align-items-center w-100' do
  = ui.nfg :button, :outlined, :secondary, as: :button, class: 'mt-3' do
    Button goes here woohoo
<div class="btn-group-vertical align-items-center w-100" aria-test="test2" aria-label="action buttons" role="group"><button class="btn mt-3 btn-outline-secondary" type="button">Button goes here woohoo
  </button></div>
= ui.nfg :button_group, :vertical, aria: { 'test' => 'test2' }, class: 'align-items-center w-100' do
  = ui.nfg :button, as: :button, class: 'mt-3' do
    Button
<div class="btn-group-vertical align-items-center w-100" aria-test="test2" aria-label="action buttons" role="group"><button class="btn mt-3 btn-primary" type="button">Button
  </button></div>