extends ../../_layout/default.pug

block canonical
  link(rel='canonical' href='https://coreui.io/docs/components/button-group/')

block breadcrumb
  +breadcrumb(
    [
      { href: '#', label: 'Home'},
      { label: 'Components'},
      { label: 'Buttons'},
      'Buttons group'
    ]
  )

block view
  +docs-components('https://coreui.io/docs/components/button-group/')
  .row
    .col-12
      .card.mb-4
        .card-header
          strong Button group
          span.small.ms-1 Basic example
        .card-body
          p.text-body-secondary.small
            | Wrap a series of buttons with 
            code .btn
            |  in 
            code .btn-group
            | . Add on optional JavaScript radio and checkbox style behavior with 
            a(href='https://coreui.io/docs/components/buttons/#button-plugin') our buttons plugin
            | .
          +example('https://coreui.io/docs/components/button-group/#basic-example')
            .btn-group(role='group' aria-label='Basic example')
              button.btn.btn-primary(type='button') Left
              button.btn.btn-primary(type='button') Middle
              button.btn.btn-primary(type='button') Right
          p.text-body-secondary.small
            | These classes can also be added to groups of links, as an alternative to the 
            a(href='https://coreui.io/docs/components/navs-tabs/')
              code .nav
              |  navigation components
            | .
          +example('https://coreui.io/docs/components/button-group/#basic-example')
            .btn-group
              a.btn.btn-primary.active(href='#' aria-current='page') Active link
              a.btn.btn-primary(href='#') Link
              a.btn.btn-primary(href='#') Link
    .col-12
      .card.mb-4
        .card-header
          strong Button group
          span.small.ms-1 Mixed styles
        .card-body
          +example('https://coreui.io/docs/components/button-group/#mixed-styles')
            .btn-group(role='group' aria-label='Basic mixed styles example')
              button.btn.btn-danger(type='button') Left
              button.btn.btn-warning(type='button') Middle
              button.btn.btn-success(type='button') Right
    .col-12
      .card.mb-4
        .card-header
          | Outlined styles
        .card-body
          +example('https://coreui.io/docs/components/button-group/#outlined-styles')
            .btn-group(role='group' aria-label='Basic outlined example')
              button.btn.btn-outline-primary(type='button') Left
              button.btn.btn-outline-primary(type='button') Middle
              button.btn.btn-outline-primary(type='button') Right
    .col-12
      .card.mb-4
        .card-header
          strong Button group
          span.small.ms-1 Checkbox and radio button groups
        .card-body
          p.text-body-secondary.small
            | Combine button-like checkbox and radio 
            a(href='https://coreui.io/docs/forms/checks-radios/') toggle buttons
            |  into a seamless looking button group.
          +example('https://coreui.io/docs/components/button-group/#checkbox-and-radio-button-groups')
            .btn-group(role='group' aria-label='Basic checkbox toggle button group')
              input#btncheck1.btn-check(type='checkbox' autocomplete='off')
              label.btn.btn-outline-primary(for='btncheck1') Checkbox 1
              input#btncheck2.btn-check(type='checkbox' autocomplete='off')
              label.btn.btn-outline-primary(for='btncheck2') Checkbox 2
              input#btncheck3.btn-check(type='checkbox' autocomplete='off')
              label.btn.btn-outline-primary(for='btncheck3') Checkbox 3
          +example('https://coreui.io/docs/components/button-group/#checkbox-and-radio-button-groups')
            .btn-group(role='group' aria-label='Basic radio toggle button group')
              input#btnradio1.btn-check(type='radio' name='btnradio' autocomplete='off' checked='')
              label.btn.btn-outline-primary(for='btnradio1') Radio 1
              input#btnradio2.btn-check(type='radio' name='btnradio' autocomplete='off')
              label.btn.btn-outline-primary(for='btnradio2') Radio 2
              input#btnradio3.btn-check(type='radio' name='btnradio' autocomplete='off')
              label.btn.btn-outline-primary(for='btnradio3') Radio 3
    .col-12
      .card.mb-4
        .card-header
          strong Button group
          span.small.ms-1 Button toolbar
        .card-body
          p.text-body-secondary.small
            | Join sets of button groups into button toolbars for more complicated components. Use utility classes as needed to space out groups, buttons, and more.
          +example('https://coreui.io/docs/components/button-group/#button-toolbar')
            .btn-toolbar(role='toolbar' aria-label='Toolbar with button groups')
              .btn-group.me-2(role='group' aria-label='First group')
                button.btn.btn-primary(type='button') 1
                button.btn.btn-primary(type='button') 2
                button.btn.btn-primary(type='button') 3
                button.btn.btn-primary(type='button') 4
              .btn-group.me-2(role='group' aria-label='Second group')
                button.btn.btn-secondary(type='button') 5
                button.btn.btn-secondary(type='button') 6
                button.btn.btn-secondary(type='button') 7
              .btn-group(role='group' aria-label='Third group')
                button.btn.btn-info(type='button') 8
          p.text-body-secondary.small
            | Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly.
          +example('https://coreui.io/docs/components/button-group/#button-toolbar')
            .btn-toolbar.mb-3(role='toolbar' aria-label='Toolbar with button groups')
              .btn-group.me-2(role='group' aria-label='First group')
                button.btn.btn-outline-secondary(type='button') 1
                button.btn.btn-outline-secondary(type='button') 2
                button.btn.btn-outline-secondary(type='button') 3
                button.btn.btn-outline-secondary(type='button') 4
              .input-group
                #btnGroupAddon.input-group-text @
                input.form-control(type='text' placeholder='Input group example' aria-label='Input group example' aria-describedby='btnGroupAddon')
            .btn-toolbar.justify-content-between(role='toolbar' aria-label='Toolbar with button groups')
              .btn-group(role='group' aria-label='First group')
                button.btn.btn-outline-secondary(type='button') 1
                button.btn.btn-outline-secondary(type='button') 2
                button.btn.btn-outline-secondary(type='button') 3
                button.btn.btn-outline-secondary(type='button') 4
              .input-group
                #btnGroupAddon2.input-group-text @
                input.form-control(type='text' placeholder='Input group example' aria-label='Input group example' aria-describedby='btnGroupAddon2')
    .col-12
      .card.mb-4
        .card-header
          strong Button group
          span.small.ms-1 Sizing
        .card-body
          p.text-body-secondary.small
            | Alternatively, of implementing button sizing classes to each button in a group, add 
            code .btn-group-*
            |  to all 
            code .btn-group
            | , including each one when nesting multiple groups.
          +example('https://coreui.io/docs/components/button-group/#sizing')
            .btn-group.btn-group-lg(role='group' aria-label='Large button group')
              button.btn.btn-outline-dark(type='button') Left
              button.btn.btn-outline-dark(type='button') Middle
              button.btn.btn-outline-dark(type='button') Right
            br
            .btn-group(role='group' aria-label='Default button group')
              button.btn.btn-outline-dark(type='button') Left
              button.btn.btn-outline-dark(type='button') Middle
              button.btn.btn-outline-dark(type='button') Right
            br
            .btn-group.btn-group-sm(role='group' aria-label='Small button group')
              button.btn.btn-outline-dark(type='button') Left
              button.btn.btn-outline-dark(type='button') Middle
              button.btn.btn-outline-dark(type='button') Right
    .col-12
      .card.mb-4
        .card-header
          strong Button group
          span.small.ms-1 Nesting
          a.anchorjs-link(aria-label='Anchor' data-anchorjs-icon='#' href='#nesting' style='padding-left: 0.375em;')
        .card-body
          p.text-body-secondary.small
            | Put a 
            code .btn-group
            |  inside another 
            code .btn-group
            |  when you need dropdown menus combined with a series of buttons.
          +example('https://coreui.io/docs/components/button-group/#nesting')
            .btn-group(role='group' aria-label='Button group with nested dropdown')
              button.btn.btn-primary(type='button') 1
              button.btn.btn-primary(type='button') 2
              .btn-group(role='group')
                button#btnGroupDrop1.btn.btn-primary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                  | Dropdown
                ul.dropdown-menu(aria-labelledby='btnGroupDrop1')
                  li
                    a.dropdown-item(href='#') Dropdown link
                  li
                    a.dropdown-item(href='#') Dropdown link
    .col-12
      .card.mb-4
        .card-header
          strong Button group
          span.small.ms-1 Vertical variation
        .card-body
          p.text-body-secondary.small
            | Create a set of buttons that appear vertically stacked rather than horizontally. 
            strong Split button dropdowns are not supported here.
          +example('https://coreui.io/docs/components/button-group/#vertical-variation')
            .btn-group-vertical(role='group' aria-label='Vertical button group')
              button.btn.btn-dark(type='button') Button
              button.btn.btn-dark(type='button') Button
              button.btn.btn-dark(type='button') Button
              button.btn.btn-dark(type='button') Button
              button.btn.btn-dark(type='button') Button
              button.btn.btn-dark(type='button') Button
          +example('https://coreui.io/docs/components/button-group/#vertical-variation')
            .btn-group-vertical(role='group' aria-label='Vertical button group')
              button.btn.btn-primary(type='button') Button
              button.btn.btn-primary(type='button') Button
              .btn-group(role='group')
                button#btnGroupVerticalDrop1.btn.btn-primary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                  | Dropdown
                ul.dropdown-menu(aria-labelledby='btnGroupVerticalDrop1')
                  li
                    a.dropdown-item(href='#') Dropdown link
                  li
                    a.dropdown-item(href='#') Dropdown link
              button.btn.btn-primary(type='button') Button
              button.btn.btn-primary(type='button') Button
              .btn-group(role='group')
                button#btnGroupVerticalDrop2.btn.btn-primary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                  | Dropdown
                ul.dropdown-menu(aria-labelledby='btnGroupVerticalDrop2')
                  li
                    a.dropdown-item(href='#') Dropdown link
                  li
                    a.dropdown-item(href='#') Dropdown link
              .btn-group(role='group')
                button#btnGroupVerticalDrop3.btn.btn-primary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                  | Dropdown
                ul.dropdown-menu(aria-labelledby='btnGroupVerticalDrop3')
                  li
                    a.dropdown-item(href='#') Dropdown link
                  li
                    a.dropdown-item(href='#') Dropdown link
              .btn-group(role='group')
                button#btnGroupVerticalDrop4.btn.btn-primary.dropdown-toggle(type='button' data-coreui-toggle='dropdown' aria-expanded='false')
                  | Dropdown
                ul.dropdown-menu(aria-labelledby='btnGroupVerticalDrop4')
                  li
                    a.dropdown-item(href='#') Dropdown link
                  li
                    a.dropdown-item(href='#') Dropdown link
          +example('https://coreui.io/docs/components/button-group/#vertical-variation')
            .btn-group-vertical(role='group' aria-label='Vertical radio toggle button group')
              input#vbtn-radio1.btn-check(type='radio' name='vbtn-radio' autocomplete='off' checked='')
              label.btn.btn-outline-danger(for='vbtn-radio1') Radio 1
              input#vbtn-radio2.btn-check(type='radio' name='vbtn-radio' autocomplete='off')
              label.btn.btn-outline-danger(for='vbtn-radio2') Radio 2
              input#vbtn-radio3.btn-check(type='radio' name='vbtn-radio' autocomplete='off')
              label.btn.btn-outline-danger(for='vbtn-radio3') Radio 3