Button group

Group a collection of related buttons together on a single line. Great for creating toolbars.

tip

If you’re creating button groups within a form you may find the form button group components more suited to your needs

Basic usage

Twig

{{
  html.button_group({
    'buttons': [
      html.button({ 'label': 'Alpha' }),
      html.button({ 'label': 'Bravo' }),
      html.button({ 'label': 'Charlie' })
    ]
  })
}}

React

<ButtonGroup>
  <Button>Alpha</Button>
  <Button>Bravo</Button>
  <Button>Charlie</Button>
</ButtonGroup>

HTML

<div className="btn__group">
  <button className="btn">Alpha</button>
  <button className="btn">Bravo</button>
  <button className="btn">Charlie</button>
</div>

Twig helper options

You can configure this helper using the common helper options, the following options are specific to this helper.

Option	Type	Description
buttons	array	An array of button elements

Icon-only buttons

For assistive technology, you must make sure your icons have their own labels which will be announced when the button receives focus.

Twig

{{
  html.button_group({
    'buttons': [
      html.button({
        'label': html.icon('align-left', {
          'label': 'Text align: left' 
        }) 
      }),
      html.button({
        'label': html.icon('align-center', {
          'label': 'Text align: center' 
        }) 
      }),
      html.button({
        'label': html.icon('align-right', {
          'label': 'Text align: right' 
        }) 
      }),
      html.button({
        'label': html.icon('align-justify', {
          'label': 'Text align: justify'
        }) 
      })
    ]
  })
}}

React

<ButtonGroup>
  <Button><i class="icon-align-left"><span class="hide">Text align: left</span></i></Button>
  <Button><i class="icon-align-center"><span class="hide">Text align: center</span></i></Button>
  <Button><i class="icon-align-right"><span class="hide">Text align: right</span></i></Button>
  <Button><i class="icon-align-justify"><span class="hide">Text align: justify</span></i></Button>
</ButtonGroup>

HTML

<div class="btn__group">
  <button class="btn"><i class="icon-align-left"><span class="hide">Text align: left</span></i></button>
  <button class="btn"><i class="icon-align-center"><span class="hide">Text align: center</span></i></button>
  <button class="btn"><i class="icon-align-right"><span class="hide">Text align: right</span></i></button>
  <button class="btn"><i class="icon-align-justify"><span class="hide">Text align: justify</span></i></button>
</div>